Styleguide (intern)

Buttons

Primary

.button Button

Outline

.button.button--outline Button

Secondary

.button.button--dark Button

Inverse (für dunkle Flächen bereits hell)

.button.button--inverse Button

Größe klein (mit .button--sm kombinierbar)

.button.button--sm Button

Mit Icon

.button (SVG-Icon als Kind-Element) Mehr erfahren

Filter Pills

Große Pille (.filter) und kleine Pille 26px (.filter.filter--sm)

Default / Inactive

.filter Filter

.filter.filter--sm Filter

Hover / Active

.filter.filter--active Filter

.filter.filter--sm.filter--active Filter

Highlight

.filter.filter--highlight Filter

.filter.filter--sm.filter--highlight Filter

Inverse / Inverse Hover (für helle Flächen, klein)

.filter.filter--sm.filter--inverse Filter

Outline / Outline Hover (für helle Flächen, Hover füllt weiß)

.filter.filter--sm.filter--outline Filter

Dropdown (nur visuell, Chevron per CSS)

.filter.filter--dropdown

.filter.filter--dropdown.filter--active

Weitere bestehende Komponenten

Nicht Teil des neuen Screenshots, zum Vergleich mit aufgeführt

.pill Pill

.pill.pill--small Pill

.tag Tag

Outline / Outline Hover (für helle Flächen, Hover füllt weiß)

.pill.pill--outline Pill

Teaser Bildgrößen

Feste Seitenverhältnisse für component/teaser.php über den Parameter imageSize – gilt nur für das Bild, Text/Overline/Titel bleiben unverändert. Boxen sind in Originalgröße (1180px = volle Breite von .content--constrained).

.teaser__media--1180x590

1180 × 590px · Preset „teaser-hero“ · Highlight-Teaser (cases/case-highlight.php)

.teaser__media--580x326

580 × 326px · Preset „16:9-half“ · 2-spaltiger Teaser, rechte Spalte (cases/case.php)

.teaser__media--480x270

480 × 270px · Preset „teaser-small“ · 2-spaltiger Teaser, linke Spalte (cases/case.php)

.teaser__media--380x475

380 × 475px · Preset „teaser-portrait“ · noch ohne Verwendung

Farben

Aus $colors in design-tokens.scss – erzeugt automatisch .block--<name> Utility-Klassen für Section-Hintergründe

3st red color(primary) · #FF3C00

3st black color(neutral-darkest) · #000000

White color(neutral-lightest) · #FFFFFF

3st lichtgrün color(mint-green) · #81FFB7

3st königsblau color(royal-blue) · #1431CD

3st tannengrün color(fir-green) · #003C00

3st himmelblau color(sky-blue) · #03FFFF

3st flieder color(lilac) · #6B2788

3st sonnengelb color(sun-yellow) · #FEFF00

3st rosé color(rose) · #FF9DE2

fazit blau color(fazit-blue) · #110A69

Gradients

Es gibt keine fest hinterlegten Gradient-Presets im Code: .block--gradient baut den Verlauf im Panel frei aus zwei Farben (backgroundColor + gradientColor) plus Neigungswinkel. Die folgenden 5 sind Beispiel-Kombinationen aus der jetzt vollständigen Palette, zum Abgleich mit dem Screenshot – keine 1:1-Übernahme der exakten Colorstops.

3st gradient 01 color(mint-green) → color(sky-blue)

3st gradient 02 color(rose) → color(primary)

3st gradient 03 color(primary) → color(sun-yellow)

3st gradient 04 color(lilac) → color(rose)

3st gradient 05 color(mint-green) → color(fir-green)

Typografie

Globales Typo-Update #209

.typo-headline-1

Headline 1

.typo-headline-2

Headline 2

.typo-headline-3

Headline 3

.typo-headline-4

Headline 4 / important text

.typo-headline-5

Headline 5

.typo-copy-1

Copy 1 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.typo-copy-2

Copy 2 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.typo-copy-3

Copy 3 – Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.typo-caption-1

Caption 1 – Lorem ipsum dolor sit amet

.typo-field-title-1

Field Title 1

.typo-callout

Callout Text

.typo-quote-subline

Quote Subline