Mit der BasicDescriptionList kannst du Term-Details-Paarungen pflegen. Du kannst es zusätzlich mit einem Einleitungstext mit Überschrift und Unterüberschrift und einem Media-Element ergänzen.
Der Term ist jeweils nur ein Eingabefeld. Bei den Details hast du aber eingeschränkte RTE-Möglichkeiten zur Verfügung wie hochgestellten oder tiefgestellten Text und Links.
Das DescriptionList Element liegt in verschiedenen Layoutvarianten vor. Die mobile Anordnung ist in allen Varianten gleich. Die DescriptionList steht dabei immer unterhalb von Medium und Einleitungstext.
Hier steht die Unterüberschrift
DescriptionList right
Hier steht die DescriptionList rechts vom Einleitungstext. Wenn du in dieser Layoutvariante wie in diesem Beispiel kein Medium pflegst, solltest du immer einen Einleitungstext pflegen, da sonst eine Lücke in der Desktop-Ansicht entsteht.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList right, Medium ist Bild
Hier wurde als Medium ein Bild eingepflegt mit einem Bildcropping von 16:9. In diesem Fall rutscht der Einleitungstext auch nach rechts über die DescriptionList.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList right, Medium ist Youtube-Video
Du kannst natürlich auch ein Youtube-Video als Medium einpflegen. Dann wird auch dieses links von der DescriptionList angezeigt.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList right, Medium ist Video-Loop
Und natürlich kann dein Medium auch ein Video-Loop sein. Die Anordnung ist wie bei den anderen Medien in dieser Layoutvariante.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList left
Hier steht die DescriptionList links vom Einleitungstext. Auch in dieser Layoutvariante solltest du immer einen Einleitungstext pflegen, wenn du kein Medium hast.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList left, mit Medium
Hier wurde als Medium ein Bild eingepflegt mit einem Bildcropping von 16:9. In diesem Fall rutscht der Einleitungstext auch nach links über die DescriptionList.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList bottom
Hier steht die DescriptionList unter dem Einleitungstext. In dieser Layoutvariante musst du nicht zwingend einen Einleitungstext pflegen, da hier keine Lücke in der Desktop-Ansicht entsteht.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
DescriptionList bottom, mit Medium
Hier wurde als Medium ein Bild eingepflegt mit einem Bildcropping von 16:9. Das Medium sitzt auch in der Desktop-Ansicht über der DescriptionList.
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
Theme & Hintergrund „Dunkel Brand“
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details
Hier steht die Unterüberschrift
Theme & Hintergrund „Hell Beachy“
- Erster Description Term
- Erste Description Details
- Zweiter Description Term
- Zweite Description Details
- Dritter Description Term
- Dritte Description Details