Ein flexibles UI-Kit

Gestaltungsrichtlinie

Farben

Primärfarben und Grautöne
Primary 1
Primary 2
Primary 3
Primary 4
Primary 5
Primary 6
Gray 1
Gray 2
Gray 3
Gray 4
White
Hinweis: Die Nummern Primary 1, Primary 2 usw. beziehen sich auf die Farben im globalen Farbfeld . Sie können die Hintergrundfarbe eines Elements einstellen, indem Sie die Klassen verwenden: "BG Primary 1" , "BG Primary 2" usw.

Farbverläufe

Farbverläufe basierend auf den Primärfarben
Gradient 1
Gradient 2
Gradient 3
Gradient 4
Gradient 5
Gradient 6
Gradient 7
Gradient 8
Gradient 9
Hinweis: Die Zahlen Grau 1, Grau 2 usw. beziehen sich auf die Farben im globalen Farbfeld. Sie können die Hintergrundfarbe eines Elements einstellen, indem Sie die Klassen verwenden: "BG Grau 1" , "BG Grau 2" usw.

Typografie

Überschriften, Textkörper und andere gängige Textelemente.

Display 1

Display 2

Display 3

Display 4

Heading one

Heading two

Heading three

Heading four

Heading five
Heading Six
Lead Text
Lead Link
Body Text
Text Link
Small Text
Small Link

Symbole - Schnittstelle

Symbole - Schnittstelle

Symbole - Sozial

Häufige Symbole für soziale Netzwerke

Symbole - Allgemein

In der gesamten Vorlage verwendete Illustrationen
Hinweis: Verwenden Sie die Klasse "Circle Large" in Verbindung mit den Color-Klassen, um das obige Ergebnis zu erzielen.

Tasten

Komponenten-, Textstil- und Größenvariationen

Texteingaben

Größen- und Statusvariationen für Texteingaben
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
* Hinweistext eingeben
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Wählbar

Kontrollkästchen, Radios und Auswahl-Dropdowns
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Elemente auswählen
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Avatare

Repräsentieren Sie Benutzer über die gesamte Benutzeroberfläche

Abzeichen

Kombinieren Sie mit anderen Komponenten, um Metadaten und Symbole anzuzeigen
Fetzig
Fantastisch
Neu
Cool
Blam
Hinweis: Verwenden Sie die Klasse "Badge" in Verbindung mit den Farbklassen, um das obige Ergebnis zu erzielen.

Platten

Strukturelle Komponente zur Anzeige von Boxed Content

Plattentitel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Schaltflächentext

Panel mit Bild

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.