Mit der Icon-Liste in Karten-Optik können Icons mit einer kurzen Beschreibung und diese 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 einen Beschreibungstext ohne RTE-Funktionalität haben. Icon und Text werden zentriert in Karten-Optik dargestellt. 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-Text-Liste verwendet werden. Dort stehen die Icons zentriert.
Layout „Auto layout“, ein Icon-Card-Element
Hier kann ein Einleitungstext stehen. Im Gegensatz zur Icon-Text-Liste hat der Typ der Überschrift keinen Einfluss auf das Styling der Überschriften der Icon-Card-Elemente.
- Erstes Card ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
Layout „Auto layout“, zwei Icon-Card-Elemente
Bei zwei Listen-Elementen werden diese nebeneinander platziert.
- Erstes Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
- Zweites Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
Layout „Auto layout“, drei Icon-Card-Elemente
Bei drei Listen-Elementen verteilen sich die Elemente dreispaltig im Auto layout über die gesamte Contentbreite.
- Erstes Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
- Zweites Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
- Drittes Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
Layout „Auto layout“, vier Icon-Card-Elemente
Bei vier Listen-Elementen verteilen sich die Elemente vierspaltig im Auto layout über die gesamte Contentbreite.
- Erstes Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
- Zweites Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
- Drittes Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
- Viertes Icon-Text-ElementLorem ipsum dolor sit amet, consectetur adipiscing elit.
Layout „Auto layout“, fünf und mehr Icon-Card-Elemente
Bei fünf oder mehr Listen-Elementen verteilen sich die Elemente immer sechsspaltig im Auto layout über die gesamte Contentbreite. Hier sollte auf die Überschrift verzichtet werden oder eine andere „erzwungene“ Rasteraufteilung gewählt werden.
- Erstes Icon-Card-Element
- Zweites Icon-Card-Element
- Drittes Icon-Card-Element
- Viertes Icon-Card-Element
- Fünftes Icon-Card-Element
- Sechstes Icon-Card-Element
- Siebtes Icon-Card-Element
- Achtes Icon-Card-Element
Manuelle Überschreibung des Auto layouts
Die automatische Spaltenaufteilung kann im Layout auch überschrieben werden, indem eine andere Layoutvariante gewählt wird, wie hier die vierspaltige Aufteilung mit dem Layout „4 Spalten Icon oberhalb“. Darüber hinaus können die Listen-Elemente auch „erzwungen“ ein-, zwei- , drei- oder sechsspaltig dargestellt werden.
- Erstes Icon-Card-Element
- Zweites Icon-Card-Element
- Drittes Icon-Card-Element
- Viertes Icon-Card-Element
- Fünftes Icon-Card-Element
- Sechstes Icon-Card-Element
- Siebtes Icon-Card-Element
- Achtes Icon-Card-Element