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