A list item egy rugalmasan használható komponens, amellyel egységesen és átláthatóan jeleníthetjük meg a tartalmakat. A list itemeket általában függőlegesen csoportosítva használjuk.
Fejlesztői dokumentáció
Icon: A list item jelentését megerősítő vagy dekoratív ikon. (opcionális)
Title: A list item címe.
Content: A list item szöveges tartalma.
Link indicator: A list item link mivoltát jelző ikon. (opcionális)
Actions: A list itemhez kapcsolódó akciók, Link vagy Button komponensként. (opcionális)
Tetszőleges ikonokkal ellátható, általános variáns.
Követelmények, teendők megjelenítésére használható variáns.
Egy folyamat egymást követő lépéseinek megjelenítésére használható variáns.
A list item variáns ikon nélkül, illetve tetszőleges – a jelentést megerősítő vagy dekoratív – ikonnal használható.
A checklist item és a numbered list item ikonjai nem változtathatók meg.
Az ikonok színe a kontextusnak vagy a szemantikai jelentésnek megfelelően neutrális, brand, pozitív vagy negatív lehet.
A list item kis vagy nagy eltartással (paddinggel) használható. Az eltartást a kontextus és a list item tartalma határozza meg.
A list item akció nélkül, illetve legfeljebb két akcióval – gombbal vagy linkkel – használható.
A list item teljes területe lehet linkelő interaktív terület. Ezt a link indicator – right arrow –bekapcsolásával jelezzük.
Bizonyos esetekben a list item címét érdemes a tartalom alá helyezni. Ezt a title position opcióval lehet beállítani.
A komponens interaktív elemei a design system sztenderd interakciós állapotainak logikáját követik.
A list itemben található linkek vagy gombok külön interaktív területet képeznek. Ha a list item egésze linkel, akkor a komponens teljes területe interaktív.
A list itemeket alapértelmezetten csoportokban használjuk. A jobb áttekinthetőség miatt a csoportokon belül törekedjünk az egységes megfogalmazásra.
A címekre vonatkozó szövegírási útmutató 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.
Ha a list item egésze linkel, akkor más interaktív elem – gomb, link – nem helyezhető el a komponensben.
A tartalmilag összetartozó list itemeket a háttér összevonásával csoportosíthatjuk.
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 komponensben található linkek tabbal fókuszálhatóak és enterrel aktiválhatóak. Ha a list item egésze linkel, akkor nem tartalmazhat további interaktív elemeket, és az egész fókuszálható és aktiválható.
A list item ikonjai 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 list item címsorának heading levelje a heading-level attribútummal állítható, így az oldal hierarchiájába illeszkedően lehet őket beilleszteni.