Planyt Base – Atoms

Headline Display

Headline XL

Headline LG

Headline MD

Headline SM

Headline XS

Schriften

Ein gut lesbarer Fließtext verbindet mehrere Gedanken miteinander. Er führt Leserinnen und Leser durch die wichtigsten Informationen, ohne jede Aussage auf eine eigene Zeile zu verteilen. Gerade in längeren Absätzen werden die Zeilenlänge, der Zeilenabstand und die bewusste freie Fläche rechts neben dem Text sichtbar.

Ein einleitender Absatz fasst das Wesentliche zusammen und macht neugierig auf die folgenden Inhalte. Seine größere Schrift betont den Einstieg, während die Lesbarkeit auch auf schmaleren Bildschirmen erhalten bleiben muss.

Zusätzliche Erläuterungen können kleiner gesetzt werden, müssen aber weiterhin gut zu lesen sein. Hinweise zu Bedingungen, Quellen oder ergänzenden Informationen sollten auch bei Zeilenumbrüchen klar erkennbar bleiben.

Buttons

Primary Button
Secondary Button
Tertiary Button
Outline Button
Text Button
Icon Button
Back Button
Download Button

Beispiele nativer Contao-Formularfelder.

FieldsetStart
Radio
Checkbox
Bitte rechnen Sie 1 plus 9.

Formulare

Abstrakte geometrische Demonstrationsgrafik mit mehreren grauen Rechtecken

Aufklappbare Elemente

Dieser Text ist ohne zusätzliche eigene JavaScript-Implementierung aufklappbar.

Dieser Text ist bereits beim Laden sichtbar.

Dieser Eintrag enthält einen eigenen Text.

Auch dieser Inhalt ist als eigenes Kindelement pflegbar.

Ein geöffneter Eintrag der Gruppe.

Das Öffnen schließt den anderen Eintrag.

Ein semantisch gegliederter Inhalt:

Interner Link
Externer Link (neuer Tab)
E-Mail-Link
Telefon-Link

Standort- und Zeitraumwerte

Beispielwerte nach Standort, Kategorie und Zeitraum
Standort Zeitraum Kategorie A Kategorie B
Nord Quartal 1 12 18
Nord Quartal 2 15 21

Tabelle

Beispieltabelle für Contao-Inhaltselemente
Name Wert
Breite 12 Spalten
Status Beispiel

Tabelle – Standard

Standardtabelle mit allen Spalten
Produkt Kategorie Monatlich Laufzeit Status
Basis Internet 19,90 € 12 Monate Verfügbar
Plus Internet und Telefon 29,90 € 24 Monate Verfügbar

Tabelle – Bordered

Gerahmte Vergleichstabelle
Merkmal Basis Plus Premium Enterprise
Speicherplatz 10 GB 50 GB 200 GB 1 TB
Benutzer 1 5 20 Unbegrenzt

Grouped Head – Karten

Vergleich der Daten nach Download und Upload
Download Upload
Produkt Minimum Maximum Minimum Typisch Maximum
Vergleich 80 500 25 180 200
Basis 80 100 25 35 40
Plus 200 250 70 90 100
Premium 400 500 150 180 200
Vergleich der Daten nach Download und Upload
Produkt: Basis
Download
Minimum
80
Maximum
100
Upload
Minimum
25
Typisch
35
Maximum
40
Produkt: Plus
Download
Minimum
200
Maximum
250
Upload
Minimum
70
Typisch
90
Maximum
100
Produkt: Premium
Download
Minimum
400
Maximum
500
Upload
Minimum
150
Typisch
180
Maximum
200

Tabellenfuß

Produkt
Vergleich
Minimum
80
Maximum
500
Minimum
25
Typisch
180
Maximum
200

Grouped Head – Scroll

Vergleich der Daten nach Download und Upload
Download Upload
Produkt Minimum Maximum Minimum Typisch Maximum
Vergleich 80 500 25 180 200
Basis 80 100 25 35 40
Plus 200 250 70 90 100
Premium 400 500 150 180 200

Liste: unordered

  • Erster Eintrag
  • Zweiter Eintrag
  • Dritter Eintrag
  • Dieser bewusst sehr ausführliche Listeneintrag enthält zahlreiche Wörter und einen vollständigen Satz, damit er bei schmalen Viewports natürlich über mehrere Zeilen umbricht und die Ausrichtung der Listenmarkierung sichtbar bleibt. Dabei ist der Eintrag auch lang genug, um die Darstellung bei unterschiedlichen Bildschirmbreiten realistisch zu testen, ohne zusätzliche Umbruchzeichen einzufügen.
  • Dieser zweite ausführliche Listeneintrag steht direkt darunter und beschreibt einen weiteren Anwendungsfall mit viel zusammenhängendem Fließtext, damit bei schmalen Fenstern mehrere Zeilen entstehen und klar erkennbar ist, wie sich Aufzählungszeichen beziehungsweise Nummern zum Text verhalten. Der Umbruch erfolgt ausschließlich durch das native Verhalten des Browsers.

Liste: ordered

  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag
  4. Dieser bewusst sehr ausführliche Listeneintrag enthält zahlreiche Wörter und einen vollständigen Satz, damit er bei schmalen Viewports natürlich über mehrere Zeilen umbricht und die Ausrichtung der Listenmarkierung sichtbar bleibt. Dabei ist der Eintrag auch lang genug, um die Darstellung bei unterschiedlichen Bildschirmbreiten realistisch zu testen, ohne zusätzliche Umbruchzeichen einzufügen.
  5. Dieser zweite ausführliche Listeneintrag steht direkt darunter und beschreibt einen weiteren Anwendungsfall mit viel zusammenhängendem Fließtext, damit bei schmalen Fenstern mehrere Zeilen entstehen und klar erkennbar ist, wie sich Aufzählungszeichen beziehungsweise Nummern zum Text verhalten. Der Umbruch erfolgt ausschließlich durch das native Verhalten des Browsers.

Liste mit Links: unordered

Liste mit Links: ordered

  1. Erster Link
  2. Zweiter Link
  3. Eintrag ohne Link
  4. Dieser bewusst sehr ausführliche Listeneintrag enthält zahlreiche Wörter und einen vollständigen Satz, damit er bei schmalen Viewports natürlich über mehrere Zeilen umbricht und die Ausrichtung der Listenmarkierung sichtbar bleibt. Dabei ist der Eintrag auch lang genug, um die Darstellung bei unterschiedlichen Bildschirmbreiten realistisch zu testen, ohne zusätzliche Umbruchzeichen einzufügen.
  5. Dieser zweite ausführliche Listeneintrag steht direkt darunter und beschreibt einen weiteren Anwendungsfall mit viel zusammenhängendem Fließtext, damit bei schmalen Fenstern mehrere Zeilen entstehen und klar erkennbar ist, wie sich Aufzählungszeichen beziehungsweise Nummern zum Text verhalten. Der Umbruch erfolgt ausschließlich durch das native Verhalten des Browsers.

Verschachtelte Liste

  • Erster Hauptpunkt
    • Unterpunkt A
    • Unterpunkt B
  • Zweiter Hauptpunkt

Einer-Grid

Grid-Element 1

Zweier-Grid

Grid-Element 1

Grid-Element 2

Dreier-Grid

Grid-Element 1

Grid-Element 2

Grid-Element 3

Vierer-Grid

Grid-Element 1

Grid-Element 2

Grid-Element 3

Grid-Element 4

Fünfer-Grid

Grid-Element 1

Grid-Element 2

Grid-Element 3

Grid-Element 4

Grid-Element 5

Fünfer-Grid mit freien Randspalten

Grid-Element 1

Grid-Element 2

Grid-Element 3

Grid-Element 4

Grid-Element 5

Responsive Container-Einstellungen

Maximale Containerbreite: 1520 px (inklusive Seitenpadding).

Diese Maximalbreite gilt in allen Bildschirmbereichen. Responsive Container- und Inhaltsbreiten:

  • Mobile (unter 768 px):
    Padding je Seite: 20 px; Containerbreite: flexibel bis unter 768 px; Inhaltsbreite: flexibel bis unter 728 px.
  • Tablet-Portrait (768 bis unter 1024 px):
    Padding je Seite: 32 px; Containerbreite: 768 px bis unter 1024 px; Inhaltsbreite: 704 px bis unter 960 px.
  • Tablet-Landscape (1024 bis unter 1280 px):
    Padding je Seite: 32 px; Containerbreite: 1024 px bis unter 1280 px; Inhaltsbreite: 960 px bis unter 1216 px.
  • Desktop (1280 bis unter 1600 px):
    Padding je Seite: 48 px; Containerbreite: 1280 px bis 1520 px; Inhaltsbreite: 1184 px bis 1424 px.
  • Desktop groß (ab 1600 px):
    Padding je Seite: 48 px; Containerbreite: 1520 px; Inhaltsbreite: 1424 px.

Berechnete Referenzbereiche mit der Viewportbreite als verfügbarer Containerbreite. Bei breiteren Viewports kommen äußere Ränder durch die Zentrierung hinzu. Die Werte sind keine Live-Messung.

Beschreibungen der Grid-Beispiele

Einer-Grid

Viewport-Kategorie: Mobile (< 768 px)Tablet-Portrait (ab 768 px)Tablet-Landscape (ab 1024 px)Desktop (ab 1280 px)Desktop groß (ab 1600 px)
Container-Innenabstand je Seite: Basis 20,00 px; ab 768 px: 32,00 px; ab 1280 px: 48,00 px
Berechnete Werte für diese enthaltene Demo: maximal 1.424,00 px Grid-Breite, 24,00 px Spaltenabstand. Die Viewport-Kategorien sind keine Grid-Umschaltpunkte.

  • 1 Spalte: Grid flexibel bis 1.424,00 px; Element flexibel bis 1.424,00 px.

Gerundete Referenzwerte. Unterhalb der Zielbreite bleibt das Element flexibel; es wird keine feste Mindestbreite erzwungen.

Zweier-Grid

Viewport-Kategorie: Mobile (< 768 px)Tablet-Portrait (ab 768 px)Tablet-Landscape (ab 1024 px)Desktop (ab 1280 px)Desktop groß (ab 1600 px)
Container-Innenabstand je Seite: Basis 20,00 px; ab 768 px: 32,00 px; ab 1280 px: 48,00 px
Berechnete Werte für diese enthaltene Demo: maximal 1.424,00 px Grid-Breite, 24,00 px Spaltenabstand. Die Viewport-Kategorien sind keine Grid-Umschaltpunkte.

  • 1 Spalte: Grid flexibel bis unter 1.184,00 px; Element flexibel bis unter 1.184,00 px.
  • 2 Spalten: Grid ab 1.184,00 px bis 1.424,00 px; Element ab 580,00 px bis 700,00 px.

Gerundete Referenzwerte. Unterhalb der Zielbreite bleibt das Element flexibel; es wird keine feste Mindestbreite erzwungen.

Dreier-Grid

Viewport-Kategorie: Mobile (< 768 px)Tablet-Portrait (ab 768 px)Tablet-Landscape (ab 1024 px)Desktop (ab 1280 px)Desktop groß (ab 1600 px)
Container-Innenabstand je Seite: Basis 20,00 px; ab 768 px: 32,00 px; ab 1280 px: 48,00 px
Berechnete Werte für diese enthaltene Demo: maximal 1.424,00 px Grid-Breite, 24,00 px Spaltenabstand. Die Viewport-Kategorien sind keine Grid-Umschaltpunkte.

  • 1 Spalte: Grid flexibel bis unter 781,33 px; Element flexibel bis unter 781,33 px.
  • 2 Spalten: Grid ab 781,33 px bis unter 1.184,00 px; Element ab 378,67 px bis unter 580,00 px.
  • 3 Spalten: Grid ab 1.184,00 px bis 1.424,00 px; Element ab 378,67 px bis 458,67 px.

Gerundete Referenzwerte. Unterhalb der Zielbreite bleibt das Element flexibel; es wird keine feste Mindestbreite erzwungen.

Vierer-Grid

Viewport-Kategorie: Mobile (< 768 px)Tablet-Portrait (ab 768 px)Tablet-Landscape (ab 1024 px)Desktop (ab 1280 px)Desktop groß (ab 1600 px)
Container-Innenabstand je Seite: Basis 20,00 px; ab 768 px: 32,00 px; ab 1280 px: 48,00 px
Berechnete Werte für diese enthaltene Demo: maximal 1.424,00 px Grid-Breite, 24,00 px Spaltenabstand. Die Viewport-Kategorien sind keine Grid-Umschaltpunkte.

  • 1 Spalte: Grid flexibel bis unter 580,00 px; Element flexibel bis unter 580,00 px.
  • 2 Spalten: Grid ab 580,00 px bis unter 882,00 px; Element ab 278,00 px bis unter 429,00 px.
  • 3 Spalten: Grid ab 882,00 px bis unter 1.184,00 px; Element ab 278,00 px bis unter 378,67 px.
  • 4 Spalten: Grid ab 1.184,00 px bis 1.424,00 px; Element ab 278,00 px bis 338,00 px.

Gerundete Referenzwerte. Unterhalb der Zielbreite bleibt das Element flexibel; es wird keine feste Mindestbreite erzwungen.

Fünfer-Grid

Viewport-Kategorie: Mobile (< 768 px)Tablet-Portrait (ab 768 px)Tablet-Landscape (ab 1024 px)Desktop (ab 1280 px)Desktop groß (ab 1600 px)
Container-Innenabstand je Seite: Basis 20,00 px; ab 768 px: 32,00 px; ab 1280 px: 48,00 px
Berechnete Werte für diese enthaltene Demo: maximal 1.424,00 px Grid-Breite, 24,00 px Spaltenabstand. Die Viewport-Kategorien sind keine Grid-Umschaltpunkte.

  • 1 Spalte: Grid flexibel bis unter 459,20 px; Element flexibel bis unter 459,20 px.
  • 2 Spalten: Grid ab 459,20 px bis unter 700,80 px; Element ab 217,60 px bis unter 338,40 px.
  • 3 Spalten: Grid ab 700,80 px bis unter 942,40 px; Element ab 217,60 px bis unter 298,13 px.
  • 4 Spalten: Grid ab 942,40 px bis unter 1.184,00 px; Element ab 217,60 px bis unter 278,00 px.
  • 5 Spalten: Grid ab 1.184,00 px bis 1.424,00 px; Element ab 217,60 px bis 265,60 px.

Gerundete Referenzwerte. Unterhalb der Zielbreite bleibt das Element flexibel; es wird keine feste Mindestbreite erzwungen.

Fünfer-Grid mit freien Randspalten

Viewport-Kategorie: Mobile (< 768 px)Tablet-Portrait (ab 768 px)Tablet-Landscape (ab 1024 px)Desktop (ab 1280 px)Desktop groß (ab 1600 px)
Container-Innenabstand je Seite: Basis 20,00 px; ab 768 px: 32,00 px; ab 1280 px: 48,00 px
Berechnete Werte für diese enthaltene Demo: maximal 1.424,00 px Grid-Breite, 24,00 px Spaltenabstand. Die Viewport-Kategorien sind keine Grid-Umschaltpunkte.

  • 1 Spalte: Grid flexibel bis unter 378,67 px; Element flexibel bis unter 378,67 px.
  • 2 Spalten: Grid ab 378,67 px bis unter 580,00 px; Element ab 177,33 px bis unter 278,00 px.
  • 3 Spalten: Grid ab 580,00 px bis unter 781,33 px; Element ab 177,33 px bis unter 244,44 px.
  • 4 Spalten: Grid ab 781,33 px bis unter 982,67 px; Element ab 177,33 px bis unter 227,67 px.
  • 5 Spalten: Grid ab 982,67 px bis 1.424,00 px; Element ab 177,33 px bis 217,33 px.

Gerundete Referenzwerte. Unterhalb der Zielbreite bleibt das Element flexibel; es wird keine feste Mindestbreite erzwungen.

Icons

Navigation Icon
Home Icon
Search Icon
Menu Icon
Close Icon
Chevron Icon
Arrow Icon
Plus Icon
Minus Icon
Check Icon
Cross Icon
Info Icon
Warning Icon
Error Icon
Success Icon
Help Icon
Settings Icon
User Icon
Account Icon
Lock Icon
Unlock Icon
Eye Icon
Eye Off Icon
Edit Icon
Delete Icon
Share Icon
Copy Icon
Download Icon
Upload Icon
Filter Icon
Sort Icon
Calendar Icon
Clock Icon
Location Icon
Notification Icon
Cart Icon
Favorite Icon
Bookmark Icon
External Link Icon
Attachment Icon
Refresh Icon
More Icon
Accessibility Icon
Social Media Icon
File Type Icon
Brand Icon

1. Content-Abstände

Vergleich des Außenabstands unter einem Content-Element. Jeder Beispielblock wird von derselben Referenzzeile gefolgt.

1.1 Kein Abstand

Beispielblock – nur der Abstand darunter ändert sich. Unten: 0 px.

↑ Hier beginnt das nächste Content-Element. Die Lücke darüber zeigt den gewählten Abstand.

1.2 Standardabstand

Beispielblock – nur der Abstand darunter ändert sich. Unten: 24 px auf allen Bildschirmbreiten.

↑ Hier beginnt das nächste Content-Element. Die Lücke darüber zeigt den gewählten Abstand.

1.3 Nur unten – Klein

Beispielblock – nur der Abstand darunter ändert sich. Unten: Mobil 24 px, Tablet 32 px, Desktop 48 px. Standardwerte; Theme-Anpassungen können abweichen.

↑ Hier beginnt das nächste Content-Element. Die Lücke darüber zeigt den gewählten Abstand.

1.4 Nur unten – Mittel

Beispielblock – nur der Abstand darunter ändert sich. Unten: Mobil 32 px, Tablet 48 px, Desktop 72 px. Standardwerte; Theme-Anpassungen können abweichen.

↑ Hier beginnt das nächste Content-Element. Die Lücke darüber zeigt den gewählten Abstand.

1.5 Nur unten – Groß

Beispielblock – nur der Abstand darunter ändert sich. Unten: Mobil 64 px, Tablet 96 px, Desktop 144 px. Standardwerte; Theme-Anpassungen können abweichen.

↑ Hier beginnt das nächste Content-Element. Die Lücke darüber zeigt den gewählten Abstand.

2.1 Section: Kein Abstand

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben: 0 px. Unten: 0 px.

2.2 Section: Nur unten – Klein

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben: 0 px. Unten: Mobil 24 px, Tablet 32 px, Desktop 48 px. Standardwerte; Theme-Anpassungen können abweichen.

2.3 Section: Nur unten – Mittel

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben: 0 px. Unten: Mobil 32 px, Tablet 48 px, Desktop 72 px. Standardwerte; Theme-Anpassungen können abweichen.

2.4 Section: Nur unten – Groß

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben: 0 px. Unten: Mobil 64 px, Tablet 96 px, Desktop 144 px. Standardwerte; Theme-Anpassungen können abweichen.

2.5 Section: Oben & unten – Klein

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben und unten jeweils: Mobil 24 px, Tablet 32 px, Desktop 48 px. Standardwerte; Theme-Anpassungen können abweichen.

2.6 Section: Oben & unten – Mittel

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben und unten jeweils: Mobil 32 px, Tablet 48 px, Desktop 72 px. Standardwerte; Theme-Anpassungen können abweichen.

2.7 Section: Oben & unten – Groß

Gleicher Inhalt, kein zusätzlicher Content-Abstand. Nur das Section-Padding unterscheidet sich. Oben und unten jeweils: Mobil 64 px, Tablet 96 px, Desktop 144 px. Standardwerte; Theme-Anpassungen können abweichen.

Tabellenvarianten

Standard

Native Tabelle: standard
Produkt Kategorie Monatlich Laufzeit Status
Basis Internet 19,90 € 12 Monate Verfügbar
Plus Internet und Telefon 29,90 € 24 Monate Verfügbar
Premium Glasfaser 49,90 € 24 Monate Verfügbar

Striped

Native Tabelle: striped
Standort Zeitraum Kategorie A Kategorie B Kategorie C
Nord Quartal 1 12 18 24
Süd Quartal 1 15 20 26
West Quartal 2 17 22 28

Compact

Native Tabelle: compact
Merkmal Basis Plus Premium Business
Speicher 10 GB 50 GB 100 GB 500 GB
Benutzer 1 5 10 50
Status Aktiv Aktiv Aktiv Aktiv

Bordered

Native Tabelle: bordered
Tarif Download Upload Preis Laufzeit
Basis 100 Mbit/s 50 Mbit/s 19,90 € 12 Monate
Plus 250 Mbit/s 100 Mbit/s 29,90 € 24 Monate
Premium 500 Mbit/s 250 Mbit/s 49,90 € 24 Monate

Gruppe – Karten – mit Kopf

Produktvergleich mit zusätzlichem Gruppenkopf
Downstream in Mbit/s Upstream in Mbit/s
Produktvariante minimal normal maximal minimal normal maximal
Bandbreite 100/50 90 100 100 45 50 50
Bandbreite 250/100 230 250 250 90 100 100
Bandbreite 500/250 400 500 500 230 250 250
Produktvergleich mit zusätzlichem Gruppenkopf
Produktvariante: Bandbreite 100/50
Downstream in Mbit/s
minimal
90
normal
100
maximal
100
Upstream in Mbit/s
minimal
45
normal
50
maximal
50
Produktvariante: Bandbreite 250/100
Downstream in Mbit/s
minimal
230
normal
250
maximal
250
Upstream in Mbit/s
minimal
90
normal
100
maximal
100
Produktvariante: Bandbreite 500/250
Downstream in Mbit/s
minimal
400
normal
500
maximal
500
Upstream in Mbit/s
minimal
230
normal
250
maximal
250

Gruppe – Karten – ohne Kopf

Produktvergleich ohne zusätzlichem Gruppenkopf
Produktvariante minimal normal maximal minimal normal maximal
Bandbreite 100/50 90 100 100 45 50 50
Bandbreite 250/100 230 250 250 90 100 100
Bandbreite 500/250 400 500 500 230 250 250
Produktvergleich ohne zusätzlichem Gruppenkopf
Produktvariante: Bandbreite 100/50
minimal
90
normal
100
maximal
100
minimal
45
normal
50
maximal
50
Produktvariante: Bandbreite 250/100
minimal
230
normal
250
maximal
250
minimal
90
normal
100
maximal
100
Produktvariante: Bandbreite 500/250
minimal
400
normal
500
maximal
500
minimal
230
normal
250
maximal
250

Gruppe – Scroll – mit Kopf

Produktvergleich mit zusätzlichem Gruppenkopf
Downstream in Mbit/s Upstream in Mbit/s
Produktvariante minimal normal maximal minimal normal maximal
Bandbreite 100/50 90 100 100 45 50 50
Bandbreite 250/100 230 250 250 90 100 100
Bandbreite 500/250 400 500 500 230 250 250

Gruppe – Scroll – ohne Kopf

Produktvergleich ohne zusätzlichem Gruppenkopf
Produktvariante minimal normal maximal minimal normal maximal
Bandbreite 100/50 90 100 100 45 50 50
Bandbreite 250/100 230 250 250 90 100 100
Bandbreite 500/250 400 500 500 230 250 250