Relume-Styleguide

Client-First V2.1 • Zuletzt aktualisiert am 09. Januar 2024
Typografie
HTML-Überschriften-Tags
HTML-Tags definieren Standardüberschriftenstile.
Alle H1 Überschriften

Überschrift 1

Alle H2-Überschriften

Überschrift 2

Alle H3-Überschriften

Überschrift 3

Alle H4-Überschriften

Überschrift 4

Alle H5-Überschriften
Überschrift 5
Alle H6-Überschriften
Überschrift 6
Überschriftenklassen
Überschriftenklassen, wenn der typografische Stil nicht mit dem Standard-HTML-Tag übereinstimmt.
Überschriftenstil-h1

Überschriftenstil-h1

Überschriftenstil-h2

Überschriftenstil-h2

Überschriftenstil-h3

Überschriftenstil-h3

Überschriftenstil-h4

-h4

Überschriftenstil-h5

Überschriftenstil-h5

Überschriftenstil-h6

Überschriftenstil-h6

Überschriftenstil-Unterüberschrift

Überschriftenstil-h6

Andere HTML-Tags
HTML-Tags definieren Standardtextstile.
Alle Absätze

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.

Alle Links
Alle Links
Alle Blockzitate
Zitat blockieren
Alle ungeordneten Listen
  • Keine Aufzählungsliste

  • Keine Aufzählungsliste

Alle ungeordneten Listen
  • Keine Aufzählungsliste

  • Keine Aufzählungsliste

Alle geordneten Listen
  1. Keine Aufzählungsliste

  2. Keine Aufzählungsliste

  3. Keine Aufzählungsliste

Textgrößen
Textgrößenklassen, wenn die Typografiegröße nicht mit dem Standard-HTML-Tag übereinstimmt.
Textgröße groß

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.

Textgröße mittel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.

Textgröße-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.

Textgröße klein

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.

Textgröße winzig

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.

Textgewichtungen
Textgewichtungsklassen, wenn die typografische Stärke nicht mit dem Standard-HTML-Tag übereinstimmt.
Textgewicht-xfett
Textgewicht-xfett (800)
Textgewicht-fett
Textgewicht-fett (700)
Textstärke-halbfett
Textstärke-Halbfett (600)
Textgewicht-mittel
Textstärke-mittel (500)
Textgewicht-normal
Textgewicht-normal (400)
Textgewicht-leicht
Textgewicht-leicht (300)
Textstile
Textstilklassen, wenn der typografische Stil nicht mit dem Standard-HTML-Tag übereinstimmt.
Textstil-kursiv
Textstil-kursiv
Textstil-durchgestrichen
Textstil-durchgestrichen
Textstil in Großbuchstaben
Textstil in Großbuchstaben
Textstil-Nowrap
Textstil-Nowrap
Textstil-Zitat
Textstil-Zitat
Textstil-Link
Textstil-2Zeilen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.
Textstil-3Zeilen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim im eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nun aber mein Lebenslauf riskiert tristique posuere.
Textstil stummgeschaltet
Textstil stummgeschaltet
Textausrichtung
Textausrichtungsklassen, wenn die typografische Ausrichtung nicht mit dem Standard-HTML-Tag übereinstimmt.
Text linksbündig ausrichten
Text linksbündig ausrichten
Textausrichtung-zentriert
Textausrichtung-zentriert
Text rechtsbündig ausrichten
Text rechtsbündig ausrichten
Rich Text
Text-Rich-Text

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6
Dies ist ein Blockzitat

Mit dem Rich-Text-Element können Sie Überschriften, Absätze, Zitate, Bilder und Videos an einem Ort erstellen und formatieren, statt sie einzeln hinzufügen und formatieren zu müssen. Doppelklicken Sie einfach und erstellen Sie ganz einfach Inhalte.

Dies ist ein Link innerhalb eines Rich-Texts

  • Listenelement
  • Listenelement
  • Listenelement
  1. Listenelement
  2. Listenelement
  3. Listenelement
A black and white photo of a man in a suit
Bildunterschrift kommt hier rein
Farben
Hintergrundfarbe
Verwalten Sie wiederkehrende Hintergrundfarben.
Hintergrundfarbe-schwarz
Hintergrundfarbe-weiß
Hintergrundfarbe-Primär
Hintergrundfarbe-sekundär
Hintergrundfarbe-Tertiär
Hintergrundfarbe-Alternative
Textfarbe
Verwalten Sie wiederkehrende Textfarben.
Textfarbe-weiß
Textfarbe-weiß
Textfarbe-Schwarz
Textfarbe-Schwarz
Textfarbe-Primär
Textfarbe-Primär
Textfarbe-Sekundär
Textfarbe-Sekundär
Textfarbe-Alternative
Textfarbe-Alternative
Auswirkungen
Kastenschatten
Mit Schatten können Sie Designs Tiefe und Realismus verleihen, indem Sie Elemente auf einer Z-Achse positionieren.
Schatten-xxsmall
Schatten-XSmall
Schatten-klein
Schatten-mittel
Schatten-groß
Schatten-xlarge
Schatten-XXL
UI-Elemente
Schaltflächen
Taste
Taste
ist-klein
Taste
ist-sekundär
Taste
ist-sekundär
ist-klein
Taste
ist-tertiär
Taste
ist-tertiär
ist-klein
Taste
ist-Link
Für die Verwendung auf dunklem Hintergrund verwenden Sie einfach die Zusatzklasse ist-alternativ
Taste
ist-alternativ
Taste
ist-alternativ
ist-klein
Taste
ist-sekundär
ist-alternativ
Taste
ist-sekundär
ist-klein
ist-alternativ
Taste
ist-Link
ist-alternativ
Taste
Schaltflächen mit Symbolen
Taste
ist-Symbol
Taste
ist-klein
ist-Symbol
Taste
ist-sekundär
ist-Symbol
Taste
ist-sekundär
ist-klein
ist-Symbol
Taste
ist-Link
ist-Symbol
Taste
ist-nur-Symbol
Taste
ist-klein
ist-nur-Symbol
Taste
ist-sekundär
ist-nur-Symbol
Taste
ist-sekundär
ist-klein
ist-nur-Symbol
Taste
ist-tertiär
ist-nur-Symbol
Taste
ist-tertiär
ist-klein
ist-nur-Symbol
Taste
ist-Link
ist-nur-Symbol
Formularelemente
Formularfeldbezeichnung
form_input
form_input
ist-Textbereich
form_input
ist-Auswahl-Eingabe
form_checkbox
form_radio
Taste
Vielen Dank! Ihre Einsendung wurde empfangen!
Symbole (Bild)

Symbolhöhe-xxsmall

Symbolhöhe-xsmall

Symbolhöhe klein

Symbolhöhe mittel

Symbolhöhe groß

Symbolhöhe-xlarge

Symbolhöhe-benutzerdefiniert1

Symbol-1x1-xxsmall

Symbol-1x1-xsmall

Symbol-1x1-klein

Symbol-1x1-mittel

Symbol-1x1-groß

Symbol-1x1-xlarge

Symbol-1x1-benutzerdefiniert1

Symbole (HTML einbetten)
Mit eingebetteten HTML-Symbolen können Sie die Symbolfarbe beim Hovern steuern.

Symbol-Einbettung-xxsmall

Symbol-Einbettung-xsmall

Symbol-Einbettung-klein

Symbol-Einbettung-Mittel

Symbol einbetten-groß

Symbol-Einbettung-xlarge

Symbol-Einbettung-Benutzerdefiniert1

Strukturklassen
Definierte und flexible Kernstruktur, die wir auf allen oder den meisten Seiten verwenden können.
Seitenumbruch
Haupt-Wrapper
Behälter-klein
Behälter-Medium
Container-groß
Polsterung global
Polsterabschnitt klein
Polsterung-Abschnitt-mittel
Polsterabschnitt groß
Schaltflächengruppe
Max. Breiten
Verwenden Sie die CSS-Eigenschaft „max-width“, um den inneren Inhalt auf eine maximale Breite zu beschränken.
maximale Breite-voll
maximale Breite - volles Tablet
maximale Breite, voll, mobil, Querformat
maximale Breite-volles-Mobil-Portrait
maximale Breite-xxlarge
maximale Breite-xlarge
maximale Breite-groß
maximale Breite-mittel
maximale Breite-klein
maximale Breite-xsmall
maximale Breite-xxsmall
Polsterungen
Richtungsklassen
Polsterung unten
Polsterung oben
vertikale Polsterung
Polsterung horizontal
Polsterung links
Polsterung rechts
Größenklassen
Polsterung-0
Polsterung-winzig
Polsterung-xxsmall
Polsterung-xsmall
Polsterung-klein
Polsterung-mittel
Polsterung-groß
Polsterung-xlarge
Polsterung-xxlarge
Polsterung-riesig
Polsterung-xriesig
Polsterung-xxriesig
Polsterung-benutzerdefiniert1
Polsterung-custom2
Polsterung-custom3
Ränder
Richtungsklassen
Rand unten
Rand oben
Rand vertikal
Rand-horizontal
Rand links
Rand rechts
Größenklassen
Rand-0
Rand-winzig
Rand-xxsmall
Rand-xsmall
Rand-klein
Rand-mittel
Rand-groß
Rand-xlarge
Rand-xxlarge
riesiger Rand
Rand-xriesig
Rand-xxriesig
Rand-benutzerdefiniert1
Rand-benutzerdefiniert2
Rand-benutzerdefiniert3
Abstandshalter
Einheitliches Abstandhaltersystem für das Projekt.
Abstandhalter-winzig
spacer-xxsmall
Abstandhalter-xsmall
Abstandhalter klein
Abstandhalter-mittel
Abstandhalter groß
Abstandhalter-xlarge
spacer-xxlarge
Abstandhalter-riesig
spacer-xriesig
spacer-xxriesig
Hilfsklassen
Nützliche Hilfsklassen, die wir in den meisten unserer Projekte gerne verwenden, um den Aufbau zu beschleunigen.
verstecken
Dieses Element ist ausgeblendet
Tablet verstecken
Handy-Portrait ausblenden
mobile-landschaft-ausblenden
Überlauf sichtbar
Überlauf versteckt
Überlauf-Auto
Überlauf-Scrollen
Zeiger-Ereignisse-Auto
Zeiger-Ereignisse-keine
Schicht
Abstand-sauber
zentrieren
z-index-1
z-index-2
display-inlineflex
Rand oben-auto
Seitenverhältnis-Quadrat
Seitenverhältnis-Portrait
Seitenverhältnis-Querformat
Seitenverhältnis-Breitbild
Farbe erben