Mit der TextList kannst du Text-Elemente in verschiedenen Layoutvarianten darstellen. Die Anzahl der Spalten kann sich dabei automatisch an der Zahl der gepflegten Text Elemente ausrichten 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 Text Element kann eine eigene Überschrift, Unterüberschrift und Bodytext haben.
Ü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 du die übergreifende Überschrift ausblendest, und der Listen Heading Typ auf „Standard Konvention“ steht, sind die Überschriften der Listen Elemente alle eine h2. Achte stets auf eine korrekte Semantik!
Hier steht die Unterüberschrift
Ein Text Element, Auto layout
Bei einem Text Element steht die TextList im Auto layout in 6 Rastereinheiten.
Hier steht die Unterüberschrift
Erstes 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.
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 IconText Elemente automatisch zur h2.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zwei Text Elemente, Auto layout
Bei zwei oder mehr Text Elementen steht die IconTextList im Auto layout in 10 Rasterbreiten.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zweites 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.
Hier steht die Unterüberschrift
Drei Text Elemente, Auto layout
Bei drei Text Elementen verteilen sich die Elemente dreispaltig im Auto layout.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zweites 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.
Hier steht die Unterüberschrift
Drittes 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.
Hier steht die Unterüberschrift
Vier oder mehr Text Elemente, Auto layout
Bei vier oder mehr Text Elementen verteilen sich die Elemente vierspaltig im Auto layout.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zweites 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.
Hier steht die Unterüberschrift
Drittes 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.
Hier steht die Unterüberschrift
Viertes 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.
Hier steht die Unterüberschrift
Fünftes 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.
Hier steht die Unterüberschrift
Sechstes 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.
Hier steht die Unterüberschrift
Vier oder mehr Text Elemente, Layout „3 cols“
Du kannst die automatische Spaltenaufteilung im Layout auch überschreiben, indem du eine andere Layoutvariante auswählst, wie hier die dreispaltige Aufteilung.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zweites 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.
Hier steht die Unterüberschrift
Drittes 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.
Hier steht die Unterüberschrift
Viertes 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.
Hier steht die Unterüberschrift
Fünftes 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.
Hier steht die Unterüberschrift
Sechstes 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.
Hier steht die Unterüberschrift
Theme & Hintergrund „Dunkel Brand“
Die TextList kann natürlich auch im dunklen Theme dargestellt werden.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zweites 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.
Hier steht die Unterüberschrift
Drittes 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.
Hier steht die Unterüberschrift
Viertes 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.
Hier steht die Unterüberschrift
Fünftes 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.
Hier steht die Unterüberschrift
Sechstes 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.
Hier steht die Unterüberschrift
Theme & Hintergrund „Hell Beachy“
Die TextList kann natürlich auch auf dem BEACHY Hintergrund dargestellt werden.
Hier steht die Unterüberschrift
Erstes 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.
Hier steht die Unterüberschrift
Zweites 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.
Hier steht die Unterüberschrift
Drittes 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.
Hier steht die Unterüberschrift
Viertes 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.
Hier steht die Unterüberschrift
Fünftes 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.
Hier steht die Unterüberschrift
Sechstes 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.