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.

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