Card Grid
Obsah
Intro
Účel
Card grid slouží k efektivnímu a přehlednému prezentování obsahu, který je snadno pochopitelný, esteticky příjemný a přístupný pro různé typy zařízení.
Jeho využívání zajistí konzistentní mezery mezi jednotlivými kartami a současně konzistenci napříč celým webem.
Kde se používá
Používá se pro hierarchické seskupování informací do jednoho menšího celku skrze vizuálně přitažlivou mřížku či list karet.
Vhodné jsou např. pro:
- prezentaci článků/novinek
- zobrazení akcí
- pro účely listing výpisů
- vizualizaci karet s kontaktními údaji
Varianty
Carousel je interaktivní prvek, který umožňuje prezentaci více karet na omezeném prostoru formou posuvného pásu. Je nutné jej doplnit o Section Heading, který definuje onen posuvný pás.
Přechod mezi jednotlivými kartami je vizuálně naznačen stínem na poslední kartě, který slouží k navození iluze kontinuity. Počet karet a jejich obsah je možné libovolně měnit.
Figma definice
- layout=grid, direction=horizontal
- Počet karet lze upravit skrytím nebo odkrytím jednotlivých karet.
Mobile specifika
Pro účely mobilního zobrazení se card grid automaticky upraví a omezí počet karet. Pouze při využití section heading je nutné změnit atribut device na mobilní verzi.
Vertikální list card gridu je využíván pro účely seznamů na webu, např. pro účely stránek s výsledky vyhledávání či aktualit nebo tiskových zpráv.
Počet karet a jejich obsah je možné libovolně měnit.
Figma definice
- layout=list, direction=vertical
- Počet položek (items): 3, 4, 5, 10.
- Karty jsou řazeny pod sebe (1 karta na řádek).
Mobile specifika
Pro účely mobilního zobrazení se horizontální karty změní na vertikální při změně atributu device na mobilní verzi.
Horizontální list card gridu je využíván pro účely, kdy je vyžadováno zobrazení více karet vedle sebe. Oproti variantě grid, která taktéž využívá vertikální karty je totiž možné zobrazit až 5 karet vedle sebe.
Počet karet je možné nastavit od 3 do 5. Také jejich obsah je možné libovolně měnit.
Figma definice
- layout=list, direction=horizontal
- Počet položek (items): 3, 4, 5.
- Karty jsou řazeny vedle sebe na řádku. Výšku karet lze sjednotit pomocí atributu fill.
Mobile specifika
Pro účely mobilního zobrazení se card grid automaticky upraví a karty se překládají pod sebe.
Varianta Grid je využívána pro účely seznamů či rozcestníků na webu, většinou pro karty s menším množstvím obsahu, např. pro účely stránek aktualit, tiskových zpráv nebo rychlé odkazy na homepage apod..
Počet karet a jejich obsah je možné libovolně měnit.
Figma definice
- layout=grid, direction=horizontal
- Počet karet (items): 3, 4, 5, 6, 8, 9, 12.
- Karty jsou uspořádány do mřížky (např. 3x2 pro 6 karet).
- Ve Figmě nelze nastavit jednotnou výšku karet napříč celým řádkem. Výška karet závisí na obsahu, proto je potřeba tento obsah ručně upravit.
- Pro varianty s 4, 5 nebo 8 kartami se nevyužité karty nastaví s opacity: 0 %, aby nedošlo k roztažení zbylých karet.
Mobile specifika
Pro účely mobilního zobrazení se card grid automaticky upraví a karty se překládají pod sebe.
Varianta card grid 2-columns je využívána pro specifické účely, např. na homepage pro účely rozcestníků na omezeném množství prostoru.
Počet karet a jejich obsah je možné libovolně měnit. Doporučeno je maximálně 6 karet ve 2 sloupcích.
Figma definice
- layout=2-columns, direction=horizontal
- Pouze defaultní varianta se 6 kartami.
- Počet karet lze upravit skrytím nebo odkrytím jednotlivých karet.
Mobile specifika
Pro účely mobilního zobrazení se card grid automaticky upraví a karty se překládají pod sebe. Nicméně, je nutné přeskupit obsah karet tak, aby odpovídaly pořadí v desktopové verzi.
Card Grid ve verzi Highlighted je využíván pro účely, kdy je vhodné zdůraznit jeden obsah, např. pro účely aktualit na homepage, kdy je zobrazena nejnovější aktualita s velkým náhledem.
Počet karet je možné nastavit od 3 do 5, pro účely čitelnosti obsahu je ovšem doporučeno zobrazení pouze 3 karet. Taktéž jejich obsah je možné libovolně měnit.
Figma definice
- layout=list, direction=horizontal
- Speciální horizontální list s kartou typu highlighted.
- Omezeno na pevný počet 3 karet.
Mobile specifika
Pro účely mobilního zobrazení se horizontální karty změní na vertikální při změně atributu device na mobilní verzi.
Doporučení
Zvolte správný styl card gridu pro daný obsah
Dle požadovaného obsahu v kartách zvolte vhodný typ karet i card gridu. Některé obsahy jsou vhodné řešit vertikálními kartami, jiné zase horizontálními.
Kratší popisy v kartě
V kartě využívejte kratší popisné údaje doplňte “...” pro znázornění pokračování. Delší popis definujte až na úrovni detailu daného obsahu. Zvýšíte tím přehlednost stránky, což napomůže rychlejší orientaci.
Doplňte nadpisy jednotlivých card gridů
Využijte pro členění card gridů na stránkách nadpisy, které mohou být doplněny např. odkazem k zobrazení všech karet či tlačítky pro procházení obsahu.
Často kladené dotazy
Jak pracovat s organismem Card Grid ve Figma?
Výběr typu Card Gridu:
- Nejprve si vyberte preferovaný typ Card Gridu z dostupných náhledů na příslušné stránce ve Figma.
- Dbejte na správnou volbu podle počtu karet (atribut Items), protože různé typy layoutů mají různý počet položek.
Kopírování a úprava:
- Zkopírujte vybraný Card Grid do svého souboru.
- Nahraďte atribut Device (původně Desktop nebo Mobile) hodnotou componentSwap, která zajistí automatické responzivní zobrazení podle typu zařízení.
- Nahraďte obsah jednotlivých karet dle potřeby.
K čemu slouží jednotlivé atributy v Card Gridu?
- Layout: Určuje styl zobrazení (list, grid, carousel...).
- Direction: Definuje orientaci layoutu (vertical nebo horizontal), využívá se pouze u layoutu list.
- Items: Určuje počet karet v gridu, který závisí na vybraném layoutu.
- Device: Používá se k automatickému přepínání mezi zařízeními pomocí tokenu componentSwap.
- CardType: Pomocný atribut – standardně je využit typ baseCard. V layoutu list lze použít typ highlighted pro zvýraznění jedné karty.
Jak ve Figma hromadně upravovat atributy karet?
Pro úpravy obsahu v kartách vyberte Content ve všech kartách gridu současně. K usnadnění práce používejte klávesové zkratky:
- Enter: Výběr části komponenty (potomka).
- Tab: Přechod mezi jednotlivými částmi (sourozenci) v rámci komponenty.