Demoseite

Auf dieser Demoseite finden Sie die wichtigsten Elemente zur Gestaltung einer Folgeseite.

Dazu gehören die verschiedenen Überschriften, Listen und Tabellen, Buttons und Links sowie einige Listentemplates, mit denen auch umfangreiche Inhalte schnell, einfach und ansprechend präsentiert werden können.

Überschrift 2

Achten Sie bei Überschriften auf die korrekte Hierarchie: Eine Überschrift 2 darf nur innerhalb einer Überschrift 1 verwendet werden. 

Überschrift 3

Achten Sie bei Überschriften auf die korrekte Hierarchie: Eine Überschrift 3 darf nur innerhalb einer Überschrift 2 verwendet werden. 

Überschrift 4

Achten Sie bei Überschriften auf die korrekte Hierarchie: Eine Überschrift 4 darf nur innerhalb einer Überschrift 3 verwendet werden. 

Überschrift 5

Achten Sie bei Überschriften auf die korrekte Hierarchie: Eine Überschrift 5 darf nur innerhalb einer Überschrift 4 verwendet werden. 

Überschrift 6

Achten Sie bei Überschriften auf die korrekte Hierarchie: Eine Überschrift 6 darf nur innerhalb einer Überschrift 5 verwendet werden. 

Listen

Verwenden Sie geordnete oder ungeordente Listen, um Inhalte struktiert aufzulisten:

Geordnete Liste

  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt

Ungeordnete Liste

  • Listenpunkt
  • Listenpunkt
    • Unterpunkt
    • Unterpunkt

Tabellen

Nutzen Sie Tabellen nur für tabellarische Daten.

Die nachfolgende Tabelle wurde mit der CSS-Klasse "tbl" formatiert. Breite Tabellen können auf Smartphones automatisch gescrollt werden. Dies kann mit der Klasse "noscroll" deaktiviert und mit der Klasse "autoscroll" auch für Tabellen außerhalb des Seiteninhalts aktiviert werden.

Wochentagvormittagsnachmittags
Montag 8:00 bis 12:00 Uhr 13:00 bis 17:00 Uhr
Dienstag 8:00 bis 12:00 Uhr 13:00 bis 17:00 Uhr
Mittwoch 8:00 bis 12:00 Uhr geschlossen
Donnerstag 8:00 bis 12:00 Uhr 13:00 bis 18:00 Uhr
Freitag 8:00 bis 12:00 Uhr geschlossen

Links und Schaltflächen

Interner Link

Externer Link

Ein Link im Fließtext kann über die Schriftformate oder über die CSS-Klassen "btn" bzw. "btn-outline" in eine Schaltfläche verwandelt werden:

Schaltfläche

Umrandete Schaltfläche

Aufklapp-Effekt für Textabschnitte

Abschnitt 1

Dies ist ein Textabschnitt für die Demoseite. Solche Textabschnitte können mit einem Aufklapp-Effekt versehen oder mehrspaltig ausgegeben werden. Außerdem können sie auch in der Randspalte oder als Zusatztext verwendet werden.

Abschnitt 2

Dies ist ein Textabschnitt für die Demoseite. Solche Textabschnitte können mit einem Aufklapp-Effekt versehen oder mehrspaltig ausgegeben werden. Außerdem können sie auch in der Randspalte oder als Zusatztext verwendet werden.

Abschnitt 3

Dies ist ein Textabschnitt für die Demoseite. Solche Textabschnitte können mit einem Aufklapp-Effekt versehen oder mehrspaltig ausgegeben werden. Außerdem können sie auch in der Randspalte oder als Zusatztext verwendet werden.

Textabschnitte in mehreren Spalten

Dies ist ein Textabschnitt für die Demoseite. Solche Textabschnitte können mit einem Aufklapp-Effekt versehen oder mehrspaltig ausgegeben werden. Außerdem können sie auch in der Randspalte oder als Zusatztext verwendet werden.

Dies ist ein Textabschnitt für die Demoseite. Solche Textabschnitte können mit einem Aufklapp-Effekt versehen oder mehrspaltig ausgegeben werden. Außerdem können sie auch in der Randspalte oder als Zusatztext verwendet werden.

Dies ist ein Textabschnitt für die Demoseite. Solche Textabschnitte können mit einem Aufklapp-Effekt versehen oder mehrspaltig ausgegeben werden. Außerdem können sie auch in der Randspalte oder als Zusatztext verwendet werden.

Themenboxen als Kacheln mit Bild und Text

Themenboxen mit Symbol im Kreis und Text

Themenboxen als Kacheln mit Symbol und Text

Bildergalerie

Benutzeranmeldung