Lumora

Styleguide

Struktur Klassen

Definierte und flexible Kernstruktur, die wir auf allen oder den meisten Seiten verwenden können.

Seiten-Wrapper

Hand-Wrapper

kleiner Container

Container-Medium

großer Container

container-voll

padding-global

padding-section-small

padding-section-medium

breiter Abschnitt

Überschriften

HTML-Tags definieren Standard-Überschriftenstile. Verwenden Sie Überschriftenklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

Überschrift 1

h1

Überschrift 2

h2

Überschrift 3

h3

Überschrift 4

h4

Überschrift 5

h5

Überschrift 6

h6

Andere HTML-Tags

HTML-Tags definieren Standardtextstile.

Alle Absätze

Der Beispieltext dient als Platzhalter für den eigentlichen Text, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie der eigentliche Text auf Ihrer Website aussehen könnte. Der Beispieltext dient als Platzhalter für den eigentlichen Text.

Alle Links

Alle Zitate

Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie der eigentliche Text auf Ihrer Website aussehen könnte.

Alle bestellten Listen

Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.

Alle ungeordneten Listen

Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.

Textgrößen

text-xs

Beispiel

Text-SM

Beispiel

Textbasis

Beispiel

text-lg

Beispiel

text-xl

Beispiel

text-2xl

Beispiel

text-3xl

Beispiel

text-4xl

Beispiel

text-5xl

Beispiel

text-6xl

Beispiel

Textstile

Textstil-Durchgestrichen

Textstil-kursiv

Textstil-gedämpft

text-style-allcaps

text-style-nowrap

Text-Stil-Link

text-style-quote

Der Beispieltext wird als Platzhalter verwendet.

Textgewichte

text-weight-light

text-weight-normal

text-weight-medium

text-weight-semibold

text-weight-medium

text-weight-bold

text-weight-medium

Textausrichtung

text-align-left

text-align-center

text-align-right

Knöpfe

Button-Kombinationsklassensystem.

Schaltfläche

Schaltflächentext

Schaltfläche

ist sekundär

Schaltflächentext

Schaltfläche

is-icon

Schaltflächentext

Farben

Verwalten Sie wiederkehrende Text- und Hintergrundfarben.

text-color-primary

text-color-secondary

text-color-subtle

text-color-alternate

text-color-yellow

text-color-alternate

text-color-on-primary

text-color-alternate

Bg Farben

bg-default

bg-primär

bg-sekundär

bg-subtle

bg-hover

Abstandhalter

Einheitliches Abstandhaltersystem für das Projekt.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

Symbole

Größen der Symbole vereinheitlichen. icon-height legt die Höhe der Symbole fest. icon-1x1 legt sowohl die Höhe als auch die Breite der Symbole fest.

icon-1x1-small

icon-1x1-mittel

icon-1x1-groß

Bilder

Verwenden Sie immer einenimg-wrap, um die Abmessungen des Bildes einzuschließen.

img

Nützliche Versorgungssysteme

Utility-Klassen, die wir gerne in den meisten unserer Projekte verwenden, um schneller zu arbeiten.

verbergen

Dieses Element ist ausgeblendet.

Tablet ausblenden

hide-mobile-landscape

hide-mobile-portrait

overflow-visible

overflow-hidden

overflow-auto

Überlauf-Bildlauf

pointer-events-auto

pointer-events-none

Schicht

Abstand reinigen

Ausrichten-Zentrieren

display-inlineflex

Erb-Farbe

Webflow-Elemente

Native Webflow-Elemente mit Client-First-Klassen.

Spacer

Spacer sind nützlich, wenn Sie zusätzlichen Platz in einem Layout benötigen, aber keinen neuen Wrapper oder keine neue Klasse dafür erstellen möchten.

form_component

Beispiel für eine Formularkomponente mit Ordnern

Vielen Dank! Ihre Einsendung wurde erhalten!

Hoppla! Beim Absenden des Formulars ist ein Fehler aufgetreten.

Text-Rich-Text

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6

Beispieltext mit einem Link wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie der eigentliche Text auf Ihrer Website aussehen könnte. Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet. Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet. Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet.

Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.

Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.

Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie der eigentliche Text auf Ihrer Website aussehen könnte. Der Beispieltext wird als Platzhalter für den eigentlichen Text verwendet, der normalerweise vorhanden ist.