CSS Variablen & Klassen Übersicht

Farben

Primärfarben

Textfarben:

Text Primary 100% .text-primary-100

Text Primary 75% .text-primary-75

Text Primary 50% .text-primary-50

Text Primary 25% .text-primary-25

Text Primary Light .text-primary-light

Text Primary Dark .text-primary-dark

Hintergrundfarben:

100% .bg-primary-100

75% .bg-primary-75

50% .bg-primary-50

25% .bg-primary-25

Light .bg-primary-light

Dark .bg-primary-dark

Sekundärfarben

Textfarben:

Text Secondary 100% .text-secondary-100

Text Secondary 75% .text-secondary-75

Text Secondary 50% .text-secondary-50

Text Secondary 25% .text-secondary-25

Text Secondary Light .text-secondary-light

Text Secondary Dark .text-secondary-dark

Hintergrundfarben:

100% .bg-secondary-100

75% .bg-secondary-75

50% .bg-secondary-50

25% .bg-secondary-25

Light .bg-secondary-light

Dark .bg-secondary-dark

Tertiärfarben

Textfarben:

Text Tertiary 100% .text-tertiary-100

Text Tertiary 75% .text-tertiary-75

Text Tertiary 50% .text-tertiary-50

Text Tertiary 25% .text-tertiary-25

Text Tertiary Light .text-tertiary-light

Text Tertiary Dark .text-tertiary-dark

Hintergrundfarben:

100% .bg-tertiary-100

75% .bg-tertiary-75

50% .bg-tertiary-50

25% .bg-tertiary-25

Light .bg-tertiary-light

Dark .bg-tertiary-dark

Quaternärfarben

Textfarben:

Text Quaternary 100% .text-quaternary-100

Text Quaternary 75% .text-quaternary-75

Text Quaternary 50% .text-quaternary-50

Text Quaternary 25% .text-quaternary-25

Text Quaternary Light .text-quaternary-light

Text Quaternary Dark .text-quaternary-dark

Hintergrundfarben:

100% .bg-quaternary-100

75% .bg-quaternary-75

50% .bg-quaternary-50

25% .bg-quaternary-25

Light .bg-quaternary-light

Dark .bg-quaternary-dark

Hinweis- & Fehlerfarben

Textfarben:

Text Hint 100% .text-hint-100

Text Error 100% .text-error-100

Hintergrundfarben:

Hint .bg-hint-100

Error .bg-error-100

Schwarz & Weiss

Textfarben:

Text Schwarz .text-black

Text Weiss .text-white

Hintergrundfarben:

Schwarz .bg-black

Weiss .bg-white

Schriftarten

Primäre Schriftart

Dies ist ein Beispieltext mit der primären Schriftart .font-primary.

('Inter', sans-serif)

Sekundäre Schriftart

Dies ist ein Beispieltext mit der sekundären Schriftart .font-secondary.

('Roboto Mono', monospace)

Dynamische Schriftgrößen (Responsiv)

H1 Überschrift .text-h1

H2 Überschrift .text-h2

H3 Überschrift .text-h3

H4 Überschrift .text-h4

H5 Überschrift .text-h5

H6 Überschrift .text-h6

Beachten Sie, wie sich die Schriftgrößen an die Bildschirmgröße anpassen (verwenden Sie 'clamp()' im CSS).

Border-Radius Varianten

XS .rounded-xs

SM .rounded-sm

MD .rounded-md

LG .rounded-lg

XL .rounded-xl

Full .rounded-full

Dynamische Spacing Varianten (Padding & Margin)

Padding Beispiele

Padding XS .p-xs

Padding SM .p-sm

Padding MD .p-md

Padding LG .p-lg

Padding XL .p-xl

Padding XXL .p-xxl

Die Padding-Werte passen sich responsiv an.

Margin Beispiele

Margin XS .m-xs

Margin SM .m-sm

Margin MD .m-md

Margin LG .m-lg

Margin XL .m-xl

Margin XXL .m-xxl

Die Margin-Werte passen sich responsiv an.

Moderne Schattenvarianten

Box Shadow SM .shadow-sm-custom

Box Shadow MD .shadow-md-custom

Box Shadow LG .shadow-lg-custom

Box Shadow XL .shadow-xl-custom

Moderne Textschattenvarianten

Text Shadow SM .text-shadow-sm

Text Shadow MD .text-shadow-md

Text Shadow LG .text-shadow-lg

Text Shadow XL .text-shadow-xl