Medien-Text-Liste
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 und Unterüberschrift ein Einleitungstext gepflegt werden. Jedes Listen-Element kann eine eigene Überschrift, eine Unterü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!
Auf dieser Seite finden Sie:
Das ist eine UnterüberschriftLayout „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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftLayout „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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftLayout „1 Spalte Media oberhalb“
In dieser Layoutvariante ist der Medien-Bereich über dem Text-Bereich der Medien-Text-Elemente.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftLayout „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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftLayout „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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftLayout „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 ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftLayout „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.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftTheme & Hintergrund „Cyan“
Das Element kann auch auf eingefärbtem Hintergrund stehen.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.
Das ist eine UnterüberschriftTheme & Hintergrund „Mint“
Das Element kann auch auf eingefärbtem Hintergrund stehen.
Das ist eine UnterüberschriftErstes 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.
Das ist eine UnterüberschriftZweites 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.
Das ist eine UnterüberschriftDrittes 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.
Das ist eine UnterüberschriftViertes 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.
Das ist eine UnterüberschriftFü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.