CSS Styleguide
Breitkopf & Härtel Websystem
Diese interne Übersicht dokumentiert die wichtigsten CSS-Klassen unseres Websystems. Ziel ist eine einheitliche Gestaltung, eine schnellere Seitenerstellung und eine klare Orientierung für Redaktion und Entwicklung.
1. Typografie
Textklassen
text-large
Dies ist ein Beispiel für text-large. Diese Klasse eignet sich für Einleitungen, Introtexte und hervorgehobene Absätze.
Schriftgröße: 20px
Zeilenhöhe: 1.65
Verwendung: Intro, Lead, hervorgehobener Fließtext
text-standard
Dies ist ein Beispiel für text-standard. Diese Klasse wird für normalen Fließtext auf Inhaltsseiten verwendet.
Schriftgröße: 16px
Zeilenhöhe: 1.6
Verwendung: Standard-Fließtext
text-small
Dies ist ein Beispiel für text-small. Diese Klasse eignet sich für kleinere Hinweise, Metadaten oder Zusatzinformationen.
Schriftgröße: 13px
Zeilenhöhe: 1.65
Verwendung: Meta-Infos, Bildunterschriften, Hinweise
2. Überschriften
Headline-System
Die folgenden Beispiele zeigen die verfügbaren Headline-Klassen, ihre Größen und ihren typischen Einsatzbereich. Empfehlung: H1 nur einmal pro Seite, H2 für Hauptabschnitte, H3 für Unterabschnitte.
Headline H1
Beispiel
Klasse: headline-h1
Schriftgröße: 56px
Zeilenhöhe: 1.05
Gewicht: 300
Verwendung: Hauptüberschrift einer Seite
Headline H2
Beispiel
Klasse: headline-h2
Schriftgröße: 37px
Zeilenhöhe: 1.2
Gewicht: 300
Verwendung: Abschnittsüberschriften
Headline H3
Beispiel
Klasse: headline-h3
Schriftgröße: 32px
Zeilenhöhe: 1.25
Gewicht: 400
Verwendung: Unterabschnitte
Headline H4
Beispiel
Klasse: headline-h4
Schriftgröße: 25px
Zeilenhöhe: 1.3
Gewicht: 400
Verwendung: kleinere Abschnittstitel
Headline H5
Klasse: headline-h5
Schriftgröße: 20px
Zeilenhöhe: 1.1
Gewicht: 500
Verwendung: Labels, kleine Titel, Versalien
Headline H6
Klasse: headline-h6
Schriftgröße: 18px
Zeilenhöhe: 1.2
Gewicht: 500
Verwendung: kleine Hervorhebungen, Rubriken
3. Buttons
Interaktive Elemente
button-outline-red
Standard-Button mit roter Outline. Geeignet für Links, Downloads und Handlungsaufforderungen.
Verwendung: CTA, Verlinkungen, Downloads
dz-chip
Kompakter pillenförmiger Link für Downloads oder kleine Aktionen innerhalb von Cards.
Verwendung: Downloadlinks, Aktionslinks in Karten
4. Karten
Card-System
Das Card-System eignet sich für strukturierte Inhalte wie Downloads, Ansprechpartner, Informationen oder Produktblöcke.
Beispielkarte
Dies ist eine Beispielkarte mit Fließtext. Karten können modular wiederverwendet und flexibel kombiniert werden.
Weitere Beispielkarte
Die Klasse dz-grid erstellt auf dem Desktop ein zweispaltiges Layout und auf mobilen Geräten eine einspaltige Ansicht.
Verwendung: Infobereiche, Downloads, strukturierte Content-Module
5. Listen
Listensystem
list-red-dash-compact
- Erster Listeneintrag
- Zweiter Listeneintrag
- Dritter Listeneintrag
Verwendung: kompakte Listen mit rotem Gedankenstrich
6. Hinweisboxen
Informationsmodule
Diese Klasse eignet sich für Hinweise, Zusatzinformationen oder redaktionell hervorgehobene Inhalte.
quote-highlight
Dieses Element eignet sich für Zitate, besondere Hinweise oder kurze Hervorhebungen im Fließtext.
7. Bildsystem
Formate und Bildgrößen
img-banner-lg
Format: 1920 × 459 px
Seitenverhältnis: ca. 4.18:1
Verwendung: große Seitenbanner / Headerbilder
img-banner-sm
Format: 1594 × 396 px
Seitenverhältnis: ca. 4:1
Verwendung: Abschnittsbanner
image-portrait-45
Format: 4:5
Beispielgröße: 600 × 750 px
Verwendung: Künstlerfotos, Teamfotos, Portraitbilder
img-focus
Format: 1080 × 1350 px
Seitenverhältnis: 4:5
Verwendung: Schwerpunktbilder, Contentbilder
img-fluid
Format: flexibel
Eigenschaft: passt sich automatisch der Containerbreite an
Verwendung: Standardbilder im Fließtext
img-logo
Maximale Höhe: 120 px
Verwendung: Partnerlogos, Logos in Listen
8. Layout
Strukturklassen
dz-wrap
Zentrale Inhaltsbegrenzung mit max. Breite und zentrierter Ausrichtung.
Verwendung: Wrapper für Inhaltsseiten und strukturierte Module
dz-grid
Zweispaltiges Raster auf Desktop, einspaltig auf Mobilgeräten.
Verwendung: Kartenlayouts, modulare Inhaltsraster
9. Best Practices
Empfehlungen für das Team
- H1 nur einmal pro Seite verwenden.
- H2 für Hauptabschnitte, H3 für Unterabschnitte einsetzen.
- Für normalen Fließtext grundsätzlich text-standard verwenden.
- Buttons und Downloadlinks möglichst einheitlich über button-outline-red oder dz-chip lösen.
- Wiederkehrende Informationsblöcke bevorzugt mit dz-card aufbauen.
- Bilder immer über die vorhandenen Bildklassen formatieren, nicht individuell pro Seite.