Mit der Icon-Text-Liste können Text-Elemente mit einem Icon versehen und diese Text-Elemente in verschiedenen Layoutvarianten dargestellt werden. Die Anzahl der Spalten kann sich dabei automatisch an der Zahl der gepflegten Listen-Elemente ausrichten (Auto layout) oder manuell festgelegt werden. Wie bei den meisten Elementen kann auch hier übergreifend neben der Überschrift ein Einleitungstext gepflegt werden. Jedes Listen-Element kann eine eigene Überschrift und eine ausführlichere Beschreibung mit RTE-Funktionalitäten haben. Wird kein Icon ausgewählt, erscheint das Fallback-Icon.
Über den „Listen Heading Typ“ kann der Stil der Überschriften für die Text Elemente bestimmt werden. Der Typ sollte nie höher sein, als der der Überschrift der Liste selbst. Wenn die übergreifende Überschrift ausgeblendet ist und der Listen Heading Typ auf „Standard Konvention“ steht, sind die Überschriften der Listen Elemente alle eine h2. Achten Sie stets auf eine korrekte Semantik!
Wenn nur wenig Text in der Beschreibung steht und keine RTE-Funktionalitäten gewünscht sind, sollte die Icon-Liste in Karten-Optik verwendet werden. Dort stehen die Icons zentriert.
Layout „Auto layout“, ein Icon-Text-Element
Hier kann ein Einleitungstext stehen. Wenn die Überschrift zum Einleitungstext mit Typ „[h2] Überschrift“ eingeblendet ist der Listen Heading Typ auf „Standard Konvention“ steht, sind die Headings der Listen-Elemente automatisch als h3 gestylt.
Erstes Icon Text List Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Wenn die übergreifende Überschrift des Elements verborgen ist wie in diesem Beispiel, und der Listen Heading Typ auf „Standard Konvention“ steht, werden die Überschriften der Listen-Elemente automatisch zur h2.
Erstes Listen-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Layout „Auto layout“, zwei Icon-Text-Elemente
Bei zwei Listen-Elementen werden diese nebeneinander platziert.
Erstes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Zweites Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Layout „Auto layout“, drei Icon-Text-Elemente
Bei drei Listen-Elementen verteilen sich die Elemente dreispaltig im Auto layout.
Erstes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Zweites Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Drittes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Layout „Auto layout“, vier oder mehr Icon-Text-Elemente
Bei vier oder mehr Listen-Elementen verteilen sich die Elemente vierspaltig im Auto layout.
Erstes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Zweites Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Drittes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Viertes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Fünftes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Sechstes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Manuelle Überschreibung des Auto layouts
Die automatische Spaltenaufteilung kann im Layout auch überschrieben werden, indem eine andere Layoutvariante gewählt wird, wie hier die dreispaltige Aufteilung mit dem Layout „3 Spalten Icon oberhalb“. Darüber hinaus können die Listen-Elemente auch „erzwungen“ ein-, zwei- oder vierspaltig dargestellt werden.
Erstes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Zweites Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Drittes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Viertes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Fünftes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.
Sechstes Icon-Text-Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus vitae quam et suscipit. Morbi luctus odio sit amet nibh dictum, id tempus est semper. Cras tincidunt luctus tempor.