Card

Container se stínem lehce vyčnívající nad pozadí aplikace vhodný k organizaci obsahu.

Ukázky

Brusnice borůvka

Vaccinium myrtillus L.
Nízký keřík dosahující výšky až 50 cm. Má opadavé listy s krátkými řapíky. Květenství této rostliny je mezi dubnem a červnem.
Citroník médský
Citrus medica
Více
Databáze
Upgrade
Lidské zdroje
Rozšíření kapacit
Servicedesk
Chyba
Oprava počítače
Infrastruktura
Rozvoj
Framework
iPhone X
36°43′N 4°25′W
208.244.64.94
17-831-6595
ZamknoutSmazat
Xiaomi Redmi 4
50°51′N 5°41′E
207.154.71.136
34-016-3699
Odemknout
Samsung Galaxy S8
7°12′S 39°20′W
83.184.130.161
05-682-0355

Struktura

Rozložení obsahu v kartě není pevně ukotveno, nicméně se přehednost a konzistenci lze kartu rozdělit na obrázek, hlavičku, tělo a zápatí. Sekce lze skládat, aby prezentace obsahu byla optimální.

Title
Subtitle
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Maecenas lorem.
ButtonButton
Title
Subtitle
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Maecenas lorem.
ButtonButton
Title
Subtitle
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Maecenas lorem. 
<div class="card">
    <div class="card-image">
        <img src="" alt="">
    </div>
    <div class="card-header">
        <div class="card-title"></div>
        <div class="card-subtitle"></div>
    </div>
    <div class="card-body"></div>
    <div class="card-footer"></div>
</div>

Karta jako tlačítko

Má-li celá karta sloužit jako akční prvek, použijte tuto strukturu.

Title
Subtitle
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Maecenas lorem.
 
<div class="card card-clickable">
    <a class="card-link" href="#"></a>
    <div class="card-image"></div>
    <div class="card-header"></div>
    <div class="card-body"></div>
    <div class="card-footer"></div>
</div>