Mit der Medien-Text-Liste können mehrere Medien-Text-Elemente in verschiedenen Layoutvarianten dargestellt und dadurch auch mehrspaltige Layouts in der Desktop-Darstellung realisiert werden. Im Unterschied zur Icon-Text-Liste oder zur Text-Liste hat die Medien-Text-Liste kein Auto layout, d.h. die Layoutvariante muss ggf. selbst bestimmt werden, wenn sich die Anzahl der Listen-Elemente ändert! Wie bei den meisten Elementen kann auch hier übergreifend neben der Überschrift ein Einleitungstext gepflegt werden. Jedes Listen-Element kann eine eigene Überschrift, eine ausführlichere Beschreibung mit RTE-Funktionalitäten und ein Media-Element haben.
Medien können Bilder, Video-Loops (MP4) oder Youtube-Videos sein. Die Bildunterschriften laufen dabei anders als beim Text & Bilder Element nicht breiter als das Bild sondern brechen um. Bei Bildern kann auch ein Bildcropping eingestellt werden.
Ü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!
Layout „1 Spalte Media links“
Das ist die voreingestellte Layoutvariante. Der Bereich für das Medium steht abwechselnd links bzw. rechts und nimmt die Hälfte der Contentbreite ein. Der Text steht auf der anderen Seite daneben. Mobil sortiert sich der Text jeweils unter das Medium. Das Medium kann auch eine Bildunterschrift haben und verlinkt sein, sofern es kein Youtube-Video ist.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element mit kleinem Bild
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 Listen-Element ohne Medium
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.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 „1 Spalte Media rechts“
In dieser Layoutvariante ist der Bereich für das Medium im ersten Listen Element auf der rechten Seite und wechselt sich im Folgenden ab.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element mit kleinem Bild
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 Listen-Element ohne Medium
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 „1 Spalte Media oberhalb“
In dieser Layoutvariante ist der Medien-Bereich über dem Text-Bereich der Medien-Text-Elemente.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element mit kleinem Bild
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 Listen-Element ohne Medium
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 „2 Spalten Media oberhalb“
In dieser Layoutvariante werden die Medien-Text-Elemente in einem zweispaltigen Raster aufgelistet. Die Media-Elemente stehen hier über dem Text.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element ohne Medium
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 Listen-Element ohne Medium
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 „1 Spalte Media unterhalb“
In dieser Layoutvariante ist der Medien-Bereich unter dem Text-Bereich der Medien-Text-Elemente. Auch mobil sitzt hier das Medium unter dem Text.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element mit kleinem Bild
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 Listen-Element ohne Medium
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 „3 Spalten Media oberhalb“
In dieser Layoutvariante werden die Medien-Text-Elemente in einem dreispaltigen Raster aufgelistet. Die Media-Elemente stehen auch hier über dem Text. Das Layout läuft über die gesamte Breite.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element mit kleinem Bild
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 Listen-Element ohne Medium
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 „4 Spalten Media oberhalb“
In dieser Layoutvariante werden die Medien-Text-Elemente in einem vierspaltigen Raster aufgelistet. Die Media-Elemente stehen auch hier über dem Text.
Erstes Listen-Element mit einem Bild
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 Listen-Element mit einem Youtube-Video
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 Listen-Element mit einem Video-Loop
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 Listen-Element mit kleinem Bild
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 Listen-Element ohne Medium
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.