Elemente

Übersicht aller Inhaltselemente der Vorlage (Styleguide). Hier sieht man auf einen Blick, wie jedes Element mit dem aktuellen Design aussieht.

Überschrift H2

Überschrift H3

Überschrift H4

Fliesstext

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Mit fettem Text, kursivem Text und einem Link.

Ungeordnete Liste
Zweiter Punkt
Dritter Punkt

Geordnete Liste
Zweiter Punkt

«Ein Zitat steht hier.»

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Aufzählung (Element «Liste»)

Erster Listenpunkt
Zweiter Listenpunkt
Dritter Listenpunkt

Tabelle

Spalte 1	Spalte 2	Spalte 3
Inhalt	Inhalt	Inhalt
Inhalt	Inhalt	Inhalt
Inhalt	Inhalt	Inhalt

Bilder

Text mit Bild oben

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Bildposition «oben»: Contao setzt die Klasse media--above.

Text mit Bild links

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Bildposition «links»: Contao setzt die Klasse media--left.

Text mit Bild rechts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Bildposition «rechts»: Contao setzt die Klasse media--right.

Text mit Bild unten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Bildposition «unten»: Contao setzt die Klasse media--below.

Bild schmal + Text mittig

CSS-Klassen bild-schmal mitte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Galerie (3 pro Reihe)

Hero-Element

Text-Element mit Bild «über dem Text» und CSS-Klasse hero, im Artikel mit Klasse artikel-vollbild.

Button

Spalten (Elementgruppe)

Elementgruppe mit CSS-Klasse spalten-2, spalten-3, spalten-4, spalten-1-2 oder spalten-2-1. Mobile stapeln sich die Spalten.