Stil-Leitfaden

Struktur-Klassen

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

page-wrapper
main-wrapper
container-klein
container-medium
Container-groß
padding-global
padding-section-small
padding-section-medium
padding-section-large
Tastengruppe

HTML-Überschriften-Tags

HTML-Tags definieren Standard-Überschriftenstile.

H1

Der Beispieltext hilft Ihnen zu verstehen, wie der echte Text aussehen könnte. Der Beispieltext wird als Platzhalter verwendet.

H2

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

H3

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

H4

Der Beispieltext wird als Platzhalter verwendet. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen könnte. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist.

H5
Der Beispieltext wird als Platzhalter verwendet. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen könnte. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen kann.
H6
Der Beispieltext wird als Platzhalter für den echten Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen kann. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen kann.

Andere HTML-Tags

HTML-Tags definieren Standardtextstile.

Alle Paragraphen

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

Alle Links
Alle Links
Alle Zitate
Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist. Beispieltext hilft Ihnen zu verstehen, wie echter Text auf Ihrer Website aussehen könnte.
Alle geordneten Listen
  1. Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  2. Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  3. Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
Alle unsortierten Listen
  • Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  • Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  • Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.

Überschriftenstile

Überschriftenklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

Überschrift-Stil-h1

Beispieltexte helfen Ihnen zu verstehen, wie echter Text aussehen kann.

Überschrift-Stil-h2

Der Beispieltext wird als Platzhalter verwendet. Der Beispieltext hilft Ihnen zu verstehen, wie der echte Text aussehen könnte.

Überschrift-Stil-h3

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

Überschrift-Stil-h4

Der Beispieltext wird als Platzhalter verwendet. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen könnte. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist.

Überschrift-Stil-h5

Der Beispieltext wird als Platzhalter verwendet. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen könnte. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen kann.

Überschrift-Stil-h6

Der Beispieltext wird als Platzhalter für den echten Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen kann. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist. Der Beispieltext hilft Ihnen zu verstehen, wie echter Text aussehen kann.

Text-Klassen

Textklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.

Textgrößen

text-size-large

Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.

text-size-medium

Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise auf Ihrer Website vorhanden ist.

text-size-regular

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

text-size-small

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

text-size-tiny

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

Textstile

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

Text Gewichte

text-weight-xbold
text-weight-xbold
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Textausrichtungen

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Buttons

Button-Combo-Klassensystem.

Taste
ist-klein
Schaltfläche Text
Taste
ist-groß
Schaltfläche Text
Taste
is-secondary
Schaltfläche Text
Taste
is-text
Schaltfläche Text

Farben

Verwalten Sie wiederkehrende Text- und Hintergrundfarben.

Farbpalette

#00000
#f5f5f5f5
#fffff

Textfarben

Text-Farbe-Schwarz
Text-Farbe-Schwarz
Text-Farbe-Grau
Text-Farbe-Grau
text-color-white
text-color-white
Text-Farbe-Hell
text-color-white

Hintergrundfarben

Hintergrundfarbe-schwarz
Hintergrundfarbe-grau
Hintergrundfarbe-weiß

Auffüllungen

Hilfssystem für Abstände - Auffüllklassen. [padding-direction] + [padding-size].

Richtung Klassen

Polsterung-unten
padding-top
Polsterung-vertikal
Aufpolsterung-horizontal
padding-left
padding-right

Größenklassen

Polsterung-0
padding-tiny
padding-xxsmall
padding-xsmall
Polsterung-klein
Polsterung-mittel
polsterung-groß
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge

Margen

Hilfssystem für Abstände - Auffüllungsklassen. [margin-direction] + [margin-size].

Richtung Klassen

Rand-unten
Rand-oben
Rand-vertikal
Rand-horizontal
margin-left
Rand rechts

Größenklassen

Marge-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-klein
margin-medium
randgroß
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge

Icons

Vereinheitlichung der Symbolgrößen. Icon-Höhe legt die Höhe der Icons fest. Symbol-1x1 legt sowohl die Höhe als auch die Breite von Symbolen fest.

icon-height-small
Icon-Höhe-mittel
icon-height-large
Symbol-1x1-klein
Symbol-1x1-mittel
Symbol-1x1-groß

Nützliche Versorgungssysteme

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

ausblenden
Dieses Element ist ausgeblendet
Versteckbares Tablet
Mobiles Porträt ausblenden
ausblenden-mobile-landschaft

Webflow-Elemente

Native Webflow-Elemente mit angewandten Client-First-Klassen.

form_component

Beispiel für eine Formularkomponente mit Ordnern

Vielen Dank! Ihr Beitrag ist eingegangen!
Ups, beim Absenden des Formulars ist etwas schief gegangen.
text-rich-text

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5
Rubrik 6

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

  • Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  • Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  • Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  1. Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  2. Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
  3. Der Beispieltext dient als Platzhalter für den echten Text, der normalerweise vorhanden ist.
Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist. Beispieltext hilft Ihnen zu verstehen, wie echter Text auf Ihrer Website aussehen könnte. Der Beispieltext wird als Platzhalter für echten Text verwendet, der normalerweise vorhanden ist.
UDESLY-START-PHPecho udesly_get_image(_u('ic8a5c77', 'img'))->altUDESLY-END-PHP
de_DEDeutsch
Zum Inhalt springen