Übersicht aller Elemente bei Contentful

Stand: 11.2025

Kapitel 1: Buttons

Die verschiedenen Buttons erklärt:

• Die Farbe des Buttons wird mithilfe der Variante ausgewählt

  • primary, secondary, usw.

• Die Position des Buttons kann über "Alignment" festgelegt werden.

  • left, center & right

• Es gibt zwei verschiedene Größen bei Buttons

  • small & large

• Man kann Buttons auch mit einem Icon versehen

  • Position des Icons kann links oder rechts neben dem Text sein

  • Größe des Icons wählbar zwischen S & M

Best Practice:

Die folgenden Buttons sind alle Linksbündig & in Größe small

• Verteilseiten

  • primary

  • center

  • large

• Ratgeberseiten

  • primary

  • center

  • small

• Contentelement (z.B. Teaser)

  • primary & secondary

  • left

  • small

Kapitel 2: Copy Text

Die verschiedenen Copy Texts erklärt:

Das hier ist ein Copytext. Wir können die Schrift in Bold, Italic oder unterstrichen machen. Zudem können wir Links hinzufügen. Die Anordnung kann links oder mittig sein.

Aufzählungen sind ebenfalls möglich:

• 1

• 2

• 3

Oder auch Nummerierungen:

1. a

2. b

3. c

Wir können aber auch bestimmte Inhalte zitieren.

Hier drunter kommt ein Zwischenstrich

Auch Tabellen sind möglich.

Kapitel 3: Full Format Image

Das Full Format Image erklärt:

• Beim Full Format Image wird das hochgeladene Bild in der realen Pixelgröße in der Mitte der Seite angezeigt

• Die Skalierung oder Platzierung des Bildes kann in Contentful nicht verändert werden

Best Practice:

Headerbild auf Ratgeberseite

Kapitel 4: Garage Network Comparison

Das Element "Garage Network Comparison" ist bei der HAG nicht mehr implementiert

Kapitel 5: Headline

Die Headline erklärt:

• Headlines werden genutzt, um die Seite zu gliedern

• Der Text wird 1:1 angezeigt

• Die farbliche Hervorhebung der Headline ist ohne Funktion!

• Die Hierarchie der Headline kann über "level" ausgewählt werden

  • 1, 2, 3, usw.

• Die Position der Headline kann über "Alignment" festgelegt werden.

  • left, center & right

Kapitel 6: Image - Text Module

Das Image - Text Module erklärt:

• Mit dem Image - Text Module können wir auf der Website Text und Bild direkt nebeneinander anzeigen

  • Das Bild ist als Full Format Image angelegt, sodass das Format 1:1 übernommen wird. Daher wirkt es im Zweifel recht unruhig

• Die Position des Bildes kann im Element angepasst werden

  • left & right

• Die farbliche Hervorhebung des Textfelds ist ohne Funktion

Kapitel 7: Intro Text

Der Intro-Text erklärt:

• Der Introtext wird auf der vollen Seitenbreite angezeigt und lässt sich nicht als H1, H2, etc. nutzen

• Der Einsatz dieses Elements ist unüblich und wird aktuell auch nirgends genutzt

Kapitel 8: Separator Line

Die Separator Line erklärt:

• Diese Linie trennt zwei Contentelemente voneinander ab. Keine weitere Funktionen möglich.

Kapitel 9: Benefits Box

Die Benefits Box erklärt:

• Die Benefits Box wird genutzt, um Contentelemente in Form von einer Hintergrundfarbe oder einem Rahmen hervorzuheben

• Die Farbe der Box kann im Elemente angepasst werden

  • blue, grey & white

  • Blue & Grey entsprechend nicht mehr den aktuellen CI-Vorgaben!

  • White sorgt nur für einen schwarzen Rahmen

• Der Inhalt der Box wird in Form eines Copy Textes hinzugefügt

• Bei Bedarf können noch Icons oder ein CTA angezeigt werden. Diese werden unter dem Copy Text, aber noch in der Box angezeigt

Best Practice:

Benefits Box auf Ratgeberseite