Icon-Text-Liste
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 eine Unterüberschrift und ein Einleitungstext gepflegt werden. Jedes Listen-Element kann eine eigene Überschrift, Unterü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!
Auf dieser Seite finden Sie:
Das ist eine UnterüberschriftLayout „Auto layout“, ein Listen-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.
Das ist eine UnterüberschriftErstes 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.
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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftLayout „Auto layout“, zwei Text Elemente
Bei zwei Listen-Elementen werden die Listen-Elemente im Auto layout nebeneinander platziert und laufen über die ganze Breite.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftLayout „Auto layout“, drei Text Elemente
Bei drei Listen-Elementen werden die Listen-Elemente im Auto layout nebeneinander platziert und laufen über die ganze Breite.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftLayout „Auto layout“, vier oder mehr Text Elemente
Bei vier oder mehr Listen-Elementen werden die Listen-Elemente im Auto layout nebeneinander platziert und laufen über die ganze Breite.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFünftes 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.
Das ist eine UnterüberschriftSechstes 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.
Das ist eine UnterüberschriftManuelle Überschreibung des Auto layouts
Die automatische Spaltenaufteilung im Layout kann auch überschrieben werden, indem eine andere Layoutvariante gewählt wird, wie hier die dreispaltige Aufteilung mit dem Layout „3 Spalten“. Darüber hinaus können die Listen-Elemente auch „erzwungen“ ein-, zwei- oder vierspaltig dargestellt werden.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFünftes 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.
Das ist eine UnterüberschriftSechstes 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.
Das ist eine UnterüberschriftDarstellungsstil „Card“
Wie im „normalen Textelement“ und im Element „Text & Bilder“ kann auch der Darstellungsstil „Card“ gewählt werden. Dann erscheinen alle (!) Listen-Elemente in Card-Optik, sind also farblich hinterlegt.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFünftes 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.
Das ist eine UnterüberschriftSechstes 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.
Das ist eine UnterüberschriftTheme & Hintergrund „Cyan“, Darstellungsstil „Standard“
Das Element kann auch komplett auf eingefärbtem Hintergrund stehen.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftTheme & Hintergrund „Cyan“, Darstellungsstil „Card“
Das Element kann auch komplett auf eingefärbtem Hintergrund stehen.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftTheme & Hintergrund „Mint“, Darstellungsstil „Standard“
Das Element kann auch komplett auf eingefärbtem Hintergrund stehen.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftTheme & Hintergrund „Mint“, Darstellungsstil „Card“
Das Element kann auch komplett auf eingefärbtem Hintergrund stehen.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.