Übersicht der Layout-Elemente
Website Styleguide

Überschriften
Jede Seite benötigt eine eindeutige Hauptüberschrift (H1), die das Thema der Seite beschreibt. Darunter folgen Abschnittsüberschriften der Ebene H2. Diese können – falls nötig – weitere Unterebenen wie H3 oder H4 enthalten, siehe auch die Hinweise zur Barrierefreiheit. Ziel ist es, eine Struktur von Überschriften zu erzeugen, wie sie zum Beispiel aus wissenschaftlichen Arbeiten oder Verträgen bekannt ist.
Hinweis: Überschriften können in Raster-Elementen (Container), in Inhaltselementen oder direkt im Text zugewiesen werden. Im Texteditor ist darauf zu achten, dass die Zuweisung über das Absatzformat und nicht über den Stil erfolgt. Ein Stil ist ein normaler Text, der nur das definierte Aussehen übernimmt, beispielsweise "Vortext" oder "keiner Text". Manchmal kann es sinnvoll sein, eine Textzeile aus gestalterischen Gründen wie eine Überschrift aussehen zu lassen. Hierfür nutzt man die Stilauswahl, beispielsweise "Textblock wie H2". Damit erzeugt man aber keine maschinenlesbare H2-Überschrift, sondern einen Text, der wie eine H2 aussieht.
Umgekehrt ist es wichtig, keine Unterüberschrift zu erzeugen, in dem der Text einfach in Versalien (Großbuchstaben) geschrieben, auf fett gestellt und eingefärbt wird. Hierfür sind die Überschriften H4, H5 und H6 zu nutzen.
H1 Seitenüberschrift
H2 Abschnittsüberschrift
H3 Unterpunkt des Abschnitts
H4 Unterpunkt des Abschnitts
H5 Unterpunkt des Abschnitts
H6 Unterpunkt des Abschnitts
Text-Stile
Neben dem Standardtext-Format gibt es zusätzliche Stile für Vortexte und kleinere Infotexte. Sie helfen, Inhalte strukturiert und übersichtlich zu gliedern. Größer dargestellte Vortexte dienen dazu, den Leser:innen einen klaren Einstieg in die Seite zu geben und die wichtigsten Informationen oder Botschaften auf den ersten Blick hervorzuheben. Sie sorgen dafür, dass der Inhalt leicht erfassbar wird und Interesse weckt, weiterzulesen. Das kleine Textformat wird genutzt, um ergänzende Informationen, Hinweise oder Zusatztexte darzustellen, ohne vom Hauptinhalt abzulenken.
Vortextformat für den Einstieg. Meist zu Beginn der Seite unter der Seitenüberschrift, oft mit Einzug links und rechts, um die Seite optisch zu strukturieren.
Standardtextformat für alle Fließtexte. Die Funktionen im Texteditor für die Änderung der Farbe bitte mit Bedacht wählen. Umfärben des Textes ersetzt keine Zwischenüberschrift.
Kleines Textformat für Zusatzinfos
Verlinkungen über Button-Elemente
Für die Verlinkung von Seiten und Inhalten stehen verschiedene Link-Formate zur Verfügung. Links mit Aktionscharakter werden dabei über die normalen Buttons als Schaltflächen dargestellt, die je nach Wichtigkeit gestaffelt sind. Solche Buttons kommen vor allem dann zum Einsatz, wenn Nutzer:innen die aktuelle Seite verlassen sollen, zum Beispiel für die Weiterleitung zu Unterseiten, Anmeldemasken oder anderen wichtigen Aktionen.
Es gibt spezielle Button-Formate für die Verlinkung von Dokumenten oder externen Webseiten. Doc-Buttons werden verwendet, um Dateien wie PDFs zu verlinken, während Link-Buttons für externe Webseiten oder zusätzliche Informationen vorgesehen sind. Verwenden Sie bitte nicht die Link-Buttons für Dateien – und umgekehrt.
Für beide Button-Typen stehen Varianten mit zwei Linien zur Verfügung. Die Linien erstrecken sich über die gesamte Spaltenbreite und sorgen so für ein ruhiges, gleichmäßiges Layout. Werden mehrere Links untereinander angeordnet, würden sich bei diesem Format die Linien berühren, wodurch sie doppelt erscheinen. Deshalb gibt es auch die Variante mit nur einer Linie, die oberhalb des Textes steht. Diese wird ausschließlich genutzt, um mehrere Links untereinander zu stapeln, ohne dass Linien aufeinandertreffen. Zum Abschluss einer solchen Auflistung wird ein Link im Format mit zwei Linien eingesetzt, damit die Reihe sauber endet.