Ü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
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-size-medium
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-size-regular
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-size-small
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-size-tiny
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.

Textstile

text-style-strikethrough
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-italic
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-muted
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-allcaps
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-nowrap
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-link
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-quote
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-2lines
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.
text-style-3lines
Dies ist ein Textblock. Doppelklicken Sie auf diesen Text, um ihn zu bearbeiten.

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-text-weiß
Schaltfläche Text
Taste
is-secondary
Schaltfläche Text
Taste
is-secondary
ist-klein
Schaltfläche Text
Taste
is-secondary
ist-groß
Schaltfläche Text
Taste
is-icon
Schaltfläche Text
Taste
is-icon
is-secondary
Schaltfläche Text
Taste
is-icon
is-text
Schaltfläche Text
Taste
is-secondary
Schaltfläche Text
Taste
is-secondary
ist-klein
Schaltfläche Text
Taste
is-secondary
ist-groß
Schaltfläche Text
Taste
is-icon
Schaltfläche Text
Taste
is-icon
is-secondary
Schaltfläche Text
Taste
is-icon
is-text
Schaltfläche Text

Farben

Verwalten Sie wiederkehrende Text- und Hintergrundfarben.

Farbpalette

#00000
#f5f5
#fffff

Textfarben

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

Hintergrundfarben

Hintergrundfarbe-schwarz
Hintergrundfarbe-grau
Hintergrundfarbe-weiß

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ß
Symbol-1x1-xgroß
Symbol-1x1-xxgroß

Maximale Breiten

Verwenden Sie die CSS-Eigenschaft max-width, um innere Inhalte auf eine maximale Breite zu beschränken.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

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
Auffüll-Abschnitt-klein
padding-section-medium
padding-section-large
Tastengruppe

Auffüllungen

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

Richtung Klassen

Polsterung-unten
padding-top
Polsterung-vertikal
Polsterung-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
padding-custom1
padding-custom2
padding-custom3

Margen

Dienstprogramm-Abstandssystem - Randklassen. [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
rand-benutzerdefiniert1
spanne-benutzerdefiniert2
spanne-benutzerdefiniert3

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
Überlauf-sichtbar
Überlauf-versteckt
Überlauf-Automatik
Überlauf-Rollen
Zeiger-Ereignisse-auf
zeiger-ereignisse-aus
Ebene
div-Quadrat
abstand-sauber
ausrichten-zentrieren
z-index-1
z-index-2
display-inlineflex
Pfeil-nach-rechts