Akkordeon-Liste
Mit der Akkordeon-Liste können Text-Elemente über eine „Akkordeon-Optik“ zugänglich gemacht werden. Es sollte immer geprüft werden, ob die Inhalte, die in Akkordeons „versteckt“ werden, nicht besser als normale Liste dargestellt werden können. Die Akkordeon-Liste ist einer Tab-Liste immer vorzuziehen. 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, Unterüberschrift und eine ausführlichere Beschreibung mit RTE-Funktionalitäten haben. Zusätzlich auch ein Medien-Element und ein Icon.
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!
Das ist eine UnterüberschriftTheme & Hintergrund „Weiß“
Achten Sie darauf, dass die Akkordeon Elemente möglichst gleich gepflegt sind. Also haben entweder alle Akkordeon Elemente je ein Media-Element oder ein Icon. Die hier dargestellten Beispiele dienen nur der Demonstration der verschiedenen Möglichkeiten.
Nur Text
Das ist eine UnterüberschriftDas ist die Überschrift
Zusätzlich zur Überschrift kann eine Unterüberschrift gepflegt werden. Pflegen Sie zur Tab Überschrift immer eine Überschrift, da die Tab Überschrift keine Semantik in sich trägt.
Text und Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das über die gesamte Contentbreite läuft.
Text und kleines Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das kleiner ist als der Content. Es wird dann links platziert.
Text und Video
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Youtube-Video eingepflegt.
Text und Video-Loop
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein mp4-Video eingepflegt.
Text und Icon
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Icon eingepflegt. Icons werden nicht mehr als Bilder in der Dateiliste gepflegt, sondern werden über das Icon Set „large“ hinzugefügt.
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 Listen-Elemente automatisch zur h2.
Nur Text
Das ist eine UnterüberschriftDas ist die Überschrift
Zusätzlich zur Überschrift kann eine Unterüberschrift gepflegt werden. Pflegen Sie zur Tab Überschrift immer eine Überschrift, da die Tab Überschrift keine Semantik in sich trägt.
Text und Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das über die gesamte Contentbreite läuft.
Text und kleines Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das kleiner ist als der Content. Es wird dann links platziert.
Text und Video
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Youtube-Video eingepflegt.
Text und Video-Loop
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein mp4-Video eingepflegt.
Text und Icon
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Icon eingepflegt. Icons werden nicht mehr als Bilder in der Dateiliste gepflegt, sondern werden über das Icon Set „large“ hinzugefügt.
Das ist eine UnterüberschriftTheme & Hintergrund „Cyan“
Das Element kann auch auf eingefärbtem Hintergrund stehen.
Nur Text
Das ist eine UnterüberschriftDas ist die Überschrift
Zusätzlich zur Überschrift kann eine Unterüberschrift gepflegt werden. Pflegen Sie zur Tab Überschrift immer eine Überschrift, da die Tab Überschrift keine Semantik in sich trägt.
Text und Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das über die gesamte Contentbreite läuft.
Text und kleines Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das kleiner ist als der Content. Es wird dann links platziert.
Text und Video
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Youtube-Video eingepflegt.
Text und Video-Loop
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein mp4-Video eingepflegt.
Text und Icon
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Icon eingepflegt. Icons werden nicht mehr als Bilder in der Dateiliste gepflegt, sondern werden über das Icon Set „large“ hinzugefügt.
Das ist eine UnterüberschriftTheme & Hintergrund „Mint“
Das Element kann auch auf eingefärbtem Hintergrund stehen.
Nur Text
Das ist eine UnterüberschriftDas ist die Überschrift
Zusätzlich zur Überschrift kann eine Unterüberschrift gepflegt werden. Pflegen Sie zur Tab Überschrift immer eine Überschrift, da die Tab Überschrift keine Semantik in sich trägt.
Text und Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das über die gesamte Contentbreite läuft.
Text und kleines Bild

Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Bild eingepflegt, das kleiner ist als der Content. Es wird dann links platziert.
Text und Video
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Youtube-Video eingepflegt.
Text und Video-Loop
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein mp4-Video eingepflegt.
Text und Icon
Das ist eine UnterüberschriftDas ist die Überschrift
Hier ist ein Icon eingepflegt. Icons werden nicht mehr als Bilder in der Dateiliste gepflegt, sondern werden über das Icon Set „large“ hinzugefügt.