A card egy rugalmasan használható komponens, amellyel egy adott témához kapcsolódó vizuális és szöveges tartalmakat, illetve akciókat jeleníthetünk meg.
Fejlesztői dokumentáció
Header: A card fejléce, amely image, avatar vagy icon lehet. (opcionális)
Content: A card tartalmát befoglaló szekció.
Title: A card címe.
Sub-title: A card alcíme. (opcionális)
Description: A card szöveges tartalma. (opcionális)
Actions: A cardhoz kapcsolódó akciók, Link vagy Button komponensként. (opcionális)
A card vertikális és horizontális elrendezésben használható. Az elrendezést a kontextusnak és a card tartalmának megfelelően kell kiválasztani.
A card két méretben – small és large – használható.
A méretet a rendelkezésre álló hely és a felhasználói felület kontextusának megfelelően kell kiválasztani. Alapesetben a small méretet használjuk.
A card opcionálisan tartalmazhat headert, amely lehet image, avatar vagy icon.
A card címet és alcímet is tartalmazhat. A leggyakori használati esetek miatt az alcím a cím felett helyezkedik el.
A card szövege tartalmazhatja a teljes információt vagy a linkelt tartalom kivonatát.
A card kiegészíthető akciókkal, amelyek Link vagy Button komponensek lehetnek.
Nem használunk akciókat, ha a card teljes területe linkel (Card link), mert ez egymásba ágyazott linkeket eredményezne.
A card teljes területe lehet linkelő interaktív terület.
Ebben az esetben nem használunk akciókat, mert ez egymásba ágyazott linkeket eredményezne. Ha mégis szükség van linkelésre utaló vizuális elemre – például Részletek linkre –, azt egyedileg, akadálymentesítési szakértővel egyeztetve kell implementálni.
A komponens és a benne található interaktív elemek a design system sztenderd interakciós állapotainak logikáját követi.
A vertikális card minimális szélessége 9rem. A horizontális card minimális szélessége 20rem.
Ha a card képet tartalmaz, a card szélességének változásával a kép megtartja az eredeti arányait.
Túl hosszú szövegeknél az alcím, a cím és a szöveges tartalom több sorba törik.
A képek horizontálisan és vertikálisan is kitöltik rendelkezésre álló helyet, és a közepük croppolódik.
Számos különböző típusú card létezik, de alapvetően mindegyik célja azonos: tömören, könnyen feldolgozhatóan megjeleníteni egy adott témához tartozó tartalmakat.
A tartalmak megjelenítése mellett azt is világosan kommunikálniuk kell, hogy mi történik, milyen tartalomra számíthat a felhasználó, ha interakcióba lép a carddal.
A legtöbb card a képen – ikonon vagy avatáron – kívül címet, szöveges tartalmat, illetve akciót tartalmaz.
A címekre és alcímekre vonatkozó szövegírási útmutatók a Nyelvtan és fogalmazás oldalon találhatók.
A szöveges tartalom legfeljebb néhány sor legyen, röviden és tömören fejtse ki vagy egészítse ki a card címét vagy témáját.
Az akciókra vonatkozó szövegírási útmutatók a Button és a Link komponenseknél találhatók.
A card rugalmas, sokféle célra használható komponens.
Használhatjuk belépési pontként a részletesebb tartalmakhoz – például cikkekhez, szolgáltatások oldalaihoz –, termékek vagy szolgáltatások bemutatására, egymást követő lépések megjelenítésére, illetve számtalan más célra is.
A cardokat csoportosítva is használhatjuk. Lehetőleg mindig ugyanolyan cardokat csoportosítsunk, hogy vizuálisan is erősítsük a cardok összetartozását.
A card a design systemben specifikált elemeken kívül más elemeket is tartalmazhat. A konzisztens és kiváló felhasználói élmény érdekében az egyedi cardoknál is követni kell a komponensre vonatkozó irányelveket.
A cardokat többféle elrendezésben használhatjuk. (Ezekre a design system jelenleg nem kínál grid komponenst.)
-
Grid: A cardok szélessége és magassága azonos. A magasságot a szöveg alatti white space-szel egyenlítjük ki.
-
Vertical masonry: A cardok szélessége azonos, de a magasságuk különbözhet.
-
Horizontal masonry: A cardok magassága azonos, de a szélességük különbözhet.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A Card linkek egy darab linkként vannak implementálva, így a teljes card kap fókuszjelölőt. A cardok között Tab billentyűvel lehet navigálni, és a Space vagy az Enter aktiválja őket.
Az actionöket tartalmazó cardok nem rendelkeznek fókuszállapottal. A cardban lévő actionök kerülnek a tabsorrendbe és lesznek fókuszálhatóak.
A képek, avatárok és ikonok alapértelmezetten dekoratívak, ezért üres alt taget kapnak. Ha információt hordoznak, a megfelelő alternatív szöveggel kell ellátni őket.
A card címsorának heading levelje a heading-level attribútummal állítható, így az oldal hierarchiájába illeszkedően lehet őket beilleszteni. Az alcím automatikusan eggyel alacsonyabb értéket vesz fel.
