Grundlagen
Dieser Styleguide ist eine Sammlung von Elementen und Komponenten, auf die Markenfarben und Typografie angewendet wurden. Um Farben oder Werte zu ändern, verwenden Sie das Variablen-Panel (V).
Farbe
Die Grundfarben sind eine Reihe von Variablen, die auf Elementklassen angewendet werden sollten. Aktualisieren Sie die Farben, indem Sie ein Element auswählen (Stil-Panel) oder im Variablen-Panel.
Hintergrundfarbe
Sektionsklassen und Hintergrund-Utility-Klassen verwenden Variablen, um die Hintergrund- und Schriftfarbe verschachtelter Textelemente anzupassen.
Überschrift
Überschrift
Überschrift
Überschrift
Überschrift
Überschrift
Typografie
Überschriften-Tags und -Klassen sind über Variablen miteinander verknüpft, was für eine einheitliche Gestaltung sorgt.
Überschriften
Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Überschriften verkörpern die Stimme einer Marke
Eine gut gestaltete Schriftart ist mehr als nur eine Ansammlung von Buchstaben – sie ist der Fingerabdruck großartigen Designs und trägt die Essenz einer Marke, einer Botschaft und einer Stimmung in sich.
Eine gut gestaltete Schriftart ist mehr als nur eine Ansammlung von Buchstaben – sie ist der Fingerabdruck großartigen Designs und trägt die Essenz einer Marke, einer Botschaft und einer Stimmung in sich.
Eine gut gestaltete Schriftart ist mehr als nur eine Ansammlung von Buchstaben – sie ist der Fingerabdruck großartigen Designs und trägt die Essenz einer Marke, einer Botschaft und einer Stimmung in sich.
Eine gut gestaltete Schriftart ist mehr als nur eine Ansammlung von Buchstaben – sie ist der Fingerabdruck großartigen Designs und trägt die Essenz einer Marke, einer Botschaft und einer Stimmung in sich.
Eine gut gestaltete Schriftart ist mehr als nur eine Ansammlung von Buchstaben – sie ist der Fingerabdruck großartigen Designs und trägt die Essenz einer Marke, einer Botschaft und einer Stimmung in sich.
Noch nie hatten so viele Menschen Zugang zu einem derart mächtigen Medium, um Unternehmen aufzubauen, Wissen, Erkenntnisse und Kreativität zu teilen sowie Gemeinschaften zu bilden.
- Nutzen Sie Weißraum, um die Lesbarkeit von Texten zu verbessern.
- Sorgen Sie für eine responsive Typografie auf allen Bildschirmgrößen.
- Verwenden Sie für eine gute Lesbarkeit den passenden Zeilenabstand.
- Nutzen Sie Weißraum, um die Lesbarkeit von Texten zu verbessern.
- Sorgen Sie für eine responsive Typografie auf allen Bildschirmgrößen.
- Verwenden Sie für eine gute Lesbarkeit den passenden Zeilenabstand.
Abstände
Abstandsstile wie Ränder, Innenabstände und Lücken basieren auf einem vordefinierten Satz von REM-Variablen und werden direkt auf die Komponentenklassen angewendet.
Variablensatz für Grid- und Flex-Layouts.
Weitere Informationen finden Sie in der Dokumentation.
Um ein einheitliches Abstandsmaß zu gewährleisten, sind die meisten Textelemente und Komponenten mit Abständen in Form von Margins oder Paddings versehen.
Überschriften verkörpern die Stimme einer Marke
Komponenten
Text-Schaltfläche
Bilder werden in ein Div mit der Klasse ratio_(value) eingebettet. Dies hilft dabei, das Seitenverhältnis des Bildes zu steuern, regelt das Überlaufverhalten und wendet einen Radius an.
Karten
Alle Karten und ihre Elemente passen sich den verschiedenen Oberflächen an.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Eine andere Überschrift, damit es nicht wiederholt wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht repetitiv wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht eintönig wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht eintönig wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht eintönig wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht eintönig wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht eintönig wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Eine andere Überschrift, damit es nicht eintönig wirkt.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tabs
Jede Tab-Schaltfläche verwendet eine Basisklasse und kann individuell gestaltet werden, um verschiedene Hintergründe oder Oberflächenvarianten abzubilden.
Slider
Slider verwenden Pfeile zur Navigation. Diese Pfeile werden über eine Basisklasse gestaltet, wobei Oberflächenmodifikatoren hinzugefügt werden können, um sie an verschiedene Hintergründe anzupassen.
Akkordeon
Die Akkordeon-Komponente dient dazu, die Sichtbarkeit von Inhalten in einem vertikal gestapelten Format umzuschalten.
Dropdown
Die Dropdown-Komponente dient zur Anzeige einer Liste von Optionen, die bei Interaktion erscheinen.
Rich Text
Die Rich-Text-Komponente wird für längere Inhalte wie Blogbeiträge, CMS-Felder oder Dokumentationen verwendet. Sie sorgt für eine einheitliche Formatierung von Textelementen wie Überschriften, Absätzen, Links und Listen.
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
Das Rich-Text-Element ermöglicht es Ihnen, Überschriften, Absätze, Zitate, Bilder und Videos an einem Ort zu erstellen und zu formatieren, anstatt sie einzeln hinzufügen und bearbeiten zu müssen. Einfach doppelklicken und Inhalte mühelos erstellen.
- Ein Rich-Text-Element kann für statische oder dynamische Inhalte verwendet werden.
- Mit dem Rich-Text-Element können Sie Elemente erstellen und formatieren
Ein Rich-Text-Element kann für statische oder dynamische Inhalte verwendet werden. Für statische Inhalte ziehen Sie es einfach auf eine beliebige Seite und beginnen mit der Bearbeitung. Für dynamische Inhalte fügen Sie einer Collection ein Rich-Text-Feld hinzu und verknüpfen das Rich-Text-Element im Einstellungsbereich mit diesem Feld. Voilà!
