Style Guide
Farben
Definiert die Hauptfarben
Schriftarten
hier die Schriftarten auflisten
Headlines:
H1 - Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
H2 - Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
H3 - Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
H4 - Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
H5 - Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
H6 - Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie.
Fließtext: Core Sans
Standardisiert Schriftarten, -größen und -hierarchien für eine klare und übersichtliche Textdarstellung. Diese Überschrift verwendet die Clamp-Funktion, um eine reaktionsfähige Größe zu erstellen.
Standardisiert Schriftarten, -größen und -hierarchien für eine klare und übersichtliche Textdarstellung. Diese Überschrift verwendet die Clamp-Funktion, um eine reaktionsfähige Größe zu erstellen. Max Text weite 75 character
Body Text
Der Standardstil für Absätze und Inhaltsblöcke, optimiert für Übersichtlichkeit. Dieser Text verwendet die Clamp-Funktion, um eine responsive Größe zu erstellen.
.body-text-s
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.body-text-m
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.body-text-l
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-200
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-300
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-400
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-500
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-600
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-700
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-800
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
.font-900
Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus
Links
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod link-ab-hier tempor invidunt ut labore link-bis-hier et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Buttons
Detaillierte Stile für interaktive Schaltflächen, einschließlich Größe, Abstände, Farben und Hover-Zustände.
Button Normal
Button Maus-Hover
Animation
Menü Style
Gibt an wie das Hauptmenü aussieht
Gibt an wie das Burgermenü aussieht (geöffnet)
Border Radius
Gibt die Rundung der Ecken für Schaltflächen, Karten und andere Elemente an, um die Konsistenz zu wahren.
--radius-s
--radius
--radius-l
--radius-50
--button-radius inside
Schatten
Definiert die Tiefen- und Schichteffekte für Karten, Modale und andere Komponenten.
Schatten XS
Schatten S
Schatten M
Schatten L
Schatten XL
Icons
Legt den Stil und die Größe der Symbole fest und stellt die visuelle Übereinstimmung mit dem Gesamtdesign sicher.
.icon
.icon .icon-outline
.icon .icon--filled
--icon-s
--icon-m
--icon-l
Formulare
Gibt an wie Formulare aussehen
Width
Gibt die Weite der Elemente an
--width-s
--width-m
--width-l
--container-width / Full Width
Abstand zwischen den Elementen
Definiert die Abstände zwischen Blöcken u.a.
Abstand S
Abstand S
Abstand S
Abstand M
Abstand M
Abstand M
Abstand L
Abstand L
Abstand L
Grid
Dieses Styleguide definiert 6 Grids
--grid-2
--grid-2
--grid-3
--grid-3
--grid-3
--grid-4
--grid-4
--grid-4
--grid-4
--grid-5
--grid-5
--grid-5
--grid-5
--grid-5
--grid-6
--grid-6
--grid-6
--grid-6
--grid-6
--grid-6
Section Padding
Abstand in den Elementen
.section-padding-s / --section-padding-s
.section-padding-m / --section-padding-m
.section-padding-l / --section-padding-l