Patterns

Patterns sind wiederkehrende Layouts, die wir als Templates, Blocks oder Sections einsetzen. In Gaia sprechen wir von:

• Templates (Mini) – kleinere Pattern-Bausteine
• Blocks (Core) – zentrale Pattern-Bausteine

Gemeinsam bilden sie den Pattern-Baukasten für konsistente Seitenstrukturen.

Hero Layout

Zweck

• Aufmerksamkeit und klare Wertbotschaft im Einstieg

Usage

• Eine Headline, ein Subline, ein primärer CTA
• Medienelement optional und sparsam

Accessibility

• Headline-Hierarchie einhalten
• CTA mit klarer Beschriftung

Content Section

Zweck

• Inhalte strukturiert und lesbar vermitteln

Usage

• Typografie und Abstände an Token ausrichten
• Inhalte nach Priorität staffeln

Accessibility

• Sinnvolle Überschriftenstruktur
• Lesbarkeit durch Kontrast sichern

Card Grid

Zweck

• Gleichartige Inhalte in Gruppen darstellen

Usage

• Einheitliche Card-Höhen
• Maximal 3 bis 4 Spalten auf Desktop

Accessibility

• Klickbare Cards mit klarer Fokusmarkierung
• Semantische Struktur je Card

Options Section

Zweck

• Optionen vergleichbar machen

Usage

• Highlight für empfohlene Option
• Kosten, Features, nächste Schritte klar gruppieren

Accessibility

• Tabellen nur bei echten Tabellendaten
• Kontrast zwischen Optionen prüfen

Article Layout

Zweck

• Längere Inhalte mit klarer Leseführung

Usage

• Inhaltsverzeichnis bei langen Artikeln
• Medien mit Beschriftung

Accessibility

• Leselänge und Zeilenbreite kontrollieren
• Bilder mit Alt-Text

Form Layout

Zweck

• Formulare verständlich und fehlerarm gestalten

Usage

• Felder logisch gruppieren
• Primären CTA am Ende platzieren

Accessibility

• Feldgruppen mit fieldset und legend
• Fehlermeldungen nahe am Feld