Card body - se stínem

Základní dlaždice obalená stínem, vhodná k použití na světlé pozadí.

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--shadow w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - beze stínu

Základní dlaždice beze stínu, vhodná například na tmavé pozadí.

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - border na stranách

Základní dlaždice s rámečkem po stranách, vhodé pro středové odělení borderem. Dávat na středovou dlaždici, dvě po stranách musí být bez borderu: .card > .card--boderd__sides < .card

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--border__sides w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - border

Základní dlaždice obalená borderem. Vhodé pro vyznačení důležíté dlaždice

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--border w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - purple border

Základní dlaždice obalená fialovým borderem, vhodné pro vyznačení důležité dlaždice, u které chceme, aby si jí uživatel povšimnul jako první.

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--border__purple w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - šedé pozadí

Základní dlaždice s šedým pozadím, vhodené na bílé a velmi světlé podklady.

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--bg__gray w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - průhledné pozadí

Základní dlaždice s průhledným pozadím, vhodná k využití na místech kde by defaultní bílé pozadí kazilo vzhled designu.

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--transparent w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu

Card body - průhledné pozadí se stínem

Základní dlaždice s průhledným pozadím, vhodná k využití na místech kde by defaultní bílé pozadí kazilo vzhled designu avšak potřebujeme její obsah viditelně oddělit od zbytku obsahu.

< div class="row" >
   < div class="col-lg-... d-flex align-items-stretch">
     < div class="card card--transparent card--shadow w-100" >
       < div class="card-body" >

       < /div >
     < /div >
   < /div >
 < /div >

Lze použít .col-lg-(1 až 12) .col-md-(1 až 12) .col-sm-(1 až 12) .col-(1 až 12) d-flex align-items-stretch automaticky dorovnává výšku dlaždic.
w-100 nastavuje šířku dlaždice na 100% je to důležíté kvůli flexboxu