Mit der IconTextList kannst du Text-Elemente mit einem Icon versehen und diese Text-Elemente in verschiedenen Layoutvarianten darstellen. Die Anzahl der Spalten kann sich dabei automatisch an der Zahl der gepflegten IconText 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 IconText 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!
Solltest du eine semantische DescriptionList pflegen wollen, nimm die IconDescriptionList.
Wichtig: Wenn kein passendes Icon im Icon-Set vorhanden ist, baue niemals die Optik mit anderen Elementen irgendwie nach, sondern wende dich an das Designteam von New Communication, damit das Icon-Set entsprechend erweitert werden kann! Wird kein Icon ausgewählt, erscheint das Fallback-Icon.
Auf dieser Seite:
- Ein IconText Element, Auto layout
- Ein IconText Element, Auto layout
- Zwei IconText Elemente, Auto layout
- Drei IconText Elemente, Auto layout
- Vier oder mehr IconText Elemente, Auto layout
- Vier oder mehr IconText Elemente, Layout „3 cols“
- Theme & Hintergrund „Dunkel Brand“
- Theme & Hintergrund „Hell Beachy“
Hier steht die Unterüberschrift
Ein IconText Element, Auto layout
Bei einem IconText Element steht die IconTextList im Auto layout in 6 Rastereinheiten.
Hier steht die Unterüberschrift
Erstes IconText 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 IconText 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 IconText Elemente, Auto layout
Bei zwei oder mehr IconText Elementen steht die IconTextList im Auto layout in 10 Rasterbreiten.
Hier steht die Unterüberschrift
Erstes IconText 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 IconText 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 IconText Elemente, Auto layout
Bei drei IconText Elementen verteilen sich die Elemente dreispaltig im Auto layout.
Hier steht die Unterüberschrift
Erstes IconText 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 IconText 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 IconText 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 IconText Elemente, Auto layout
Bei vier oder mehr IconText Elementen verteilen sich die Elemente vierspaltig im Auto layout.
Hier steht die Unterüberschrift
Erstes IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconTextList kann natürlich auch im dunklen Theme dargestellt werden.
Hier steht die Unterüberschrift
Erstes IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconTextList kann natürlich auch auf dem BEACHY Hintergrund dargestellt werden.
Hier steht die Unterüberschrift
Erstes IconText 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 IconText 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 IconText 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 IconText 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 IconText 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 IconText 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.