Style Guide

Ein zentraler Leitfaden für gemeinsame Schnittstellenkomponenten.
Farben
Eine bequem vorbereitete Palette, mit der Sie alle Farben leicht anpassen können.
Primary 1
Primary 2
Primary 3
Gray 1
Gray 2
Gray 3
Gray 4
Weiß
Success
Warning
Gefahr
Typografie
Headings, Body und andere gemeinsame Textelemente.

Display One

Display Zwei

Heading One

Large Heading

Heading Two

Medium Heading

Heading Three

Heading Four

Heading Five
Heading Six
Large Text Large Link 
Body Text Body Link
Small Text Small Link
Tiny Text Tiny Link
Link mit Pfeil
Rich Text Element
Formatierung für typografische Elemente innerhalb des Rich Text Elements.

Heading Two

Mit dem Rich-Text-Element können Sie Überschriften, Absätze, Blockquotes, Bilder und Videos alle an einem Ort erstellen und formatieren, anstatt sie einzeln hinzufügen und formatieren zu müssen. Einfach doppelklicken und leicht Inhalte erstellen.

Hier ist eine Blockquote

Heading Four

Überschriften, Absätze, Blockquotes, Abbildungen, Bilder und Bildunterschriften können alle gestaltet werden, nachdem eine Klasse dem Rich-Text-Element mithilfe des nested selector system "When inside of" hinzugefügt wurde. Hier ist etwas Bold Text und hier ist etwas Italicised Text.

Hier ist eine Bildunterschrift.
  • Bulleted List Item 1
  • Bulleted List Item 2
  • Bulleted List Item 3
  1. Numbered Item 1
  2. Numbered Item 2
  3. Numbered Item 3
Icons - Schnittstelle
Gemeinsame Schnittstellen-Ikonografie
Icons - Sozial
Gemeinsame soziale Netzwerkikonen
Buttons
Component, Textstil und Größenvariationen.
Round Button
Icon Button
Form Inputs
Size and state variations for text inputs.
Input Sizes
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Textareas
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Input mit Icon
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Labelled Input
Label
* Input hint text
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Form Selectables
Checkboxen, Radios und Selects.
Checkboxen
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Radiosender
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Selects
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Switches
Vielen Dank! Ihre Eingabe wurde empfangen!
Ups! Beim Absenden des Formulars ist etwas schief gelaufen.
Tabs
Mehrere Stile für die Anzeige von tabellarischen Inhalten.
Tab 1 Inhalt
Tab 2 Inhalt
Tab 3 Inhalt
Tab 1 Inhalt
Tab 2 Inhalt
Tab 3 Inhalt
Tab 1 Inhalt
Tab 2 Inhalt
Tab 3 Inhalt
Tab 1 Inhalt
Tab 2 Inhalt
Tab 3 Inhalt
Namensschilder
Kombiniert mit anderen Komponenten, um Metadaten anzuzeigen.
Primary 1
Primary 2
Primary 3
Gray 1
Gray 2
Gray 3
Gray 4
Success
Warning
Gefahr
Avatare
Repräsentieren Sie Benutzer über die Schnittstelle.
Avatar Sizes
Small
Standard
Breite
Shadows
Preset Styles, um Tiefe auf Schnittstellenkomponenten zu implizieren.
Small
Standard
Breite
Boxed Content
Strukturelle Komponente zur Anzeige von Inhalten mit Padding und einer Umrandung.
Heading
Dies ist etwas Text innerhalb eines Div-Blocks.
Heading

Dies ist etwas Text innerhalb eines Div-Blocks.

Button
Icons
Component arrangements that include icons.
Content Title
Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Content Title
Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.

Schnappen Sie sich ein wenig Aufmerksamkeit mit dieser kurzen Überschrift.

Volutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Icon Horizontal Heading
Content Title
Bolutpat egestas nibh rhoncus mauris semper. Quam nec consectetur est sed lobortis orci ridiculus.
Links
Mehrzweckkomponenten zur Verlinkung mit anderen Seiten.
Link Title
Listen
Geeignet vorbereitete Listen in mehreren Stilen.
Modulare Architektur
Clean, Curated Visual Aesthetic
Friendly Customer Support
Modulare Architektur
Clean, Curated Visual Aesthetic
Friendly Customer Support
Modulare Architektur
Clean, Curated Visual Aesthetic
Friendly Customer Support
Modulare Architektur
Clean, Curated Visual Aesthetic
Friendly Customer Support

Suche