Typografie
HTML-Überschriften-Tags
HTML-Tags definieren Standard-Überschriftenstile.
Alle H1-Überschriften

Rubrik 1

Alle H2-Überschriften

Rubrik 2

Alle H3-Überschriften

Rubrik 3

Alle H4-Rubriken

Rubrik 4

Alle H5 Rubriken
Rubrik 5
Alle H6 Rubriken
Rubrik 6
Überschriftenklassen
Überschriftenklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.
Überschrift-Stil-h1

Überschrift-Stil-h1

Überschrift-Stil-h2

Überschrift-Stil-h2

Überschrift-Stil-h3

Überschrift-Stil-h3

Überschrift-Stil-h4

Überschrift-Stil-h4

Überschrift-Stil-h5

Überschrift-Stil-h5

Überschrift-Stil-h6

Überschrift-Stil-h6

Andere HTML-Tags
HTML-Tags definieren Standardtextstile.
Alle Paragraphen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.

Alle Links
Alle Links
Alle Block-Zitate
Zitat blockieren
Alle unsortierten Listen
  • Keine Aufzählungsliste

  • Keine Aufzählungsliste

Alle unsortierten 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 Größe der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.
text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.

Textgewichte
Textgewichtsklassen, wenn das Gewicht der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Textstile
Textstilklassen, wenn der Typografiestil nicht mit dem Standard-HTML-Tag übereinstimmt.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 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. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
text-style-tagline
text-style-tagline
text-color-white
text-color-white
Textausrichtung
Textausrichtungsklassen, wenn die Ausrichtung der Typografie nicht mit dem Standard-HTML-Tag übereinstimmt.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Reichhaltiger Text
text-rich-text

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 4

Rubrik 5
Rubrik 6
Dies ist ein Blockzitat

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

Dies ist ein Link innerhalb eines Rich Textes

  • Posten auflisten
  • Posten auflisten
  • Posten auflisten
  1. Posten auflisten
  2. Posten auflisten
  3. Posten auflisten
Die Bildunterschrift steht hier
Farben
Farbschemata
Verwalten Sie Ihre Farben ganz einfach mit globalen Farbschemata, indem Sie die Farbschemaklasse zu dem Abschnitt hinzufügen, auf den Sie sie anwenden möchten.
Farbschema-1
Schema 1

Textfarbe

UI-Elemente
Buttons
Taste
ist-klein
Taste
is-secondary
Taste
is-secondary
ist-klein
Taste
is-link
Zur Verwendung auf einem dunklen Hintergrund verwenden Sie einfach die Zusatzklasse is-alternate
Taste
ist-Alternativ
Taste
ist-Alternativ
ist-klein
Taste
is-secondary
ist-Alternativ
Taste
is-secondary
ist-klein
ist-Alternativ
Taste
is-link
ist-Alternativ
Schaltfläche
Schaltflächen mit Symbolen
Taste
is-icon
Taste
ist-klein
is-icon
Taste
is-secondary
is-icon
Taste
is-secondary
ist-klein
is-icon
Taste
is-link
is-icon
Taste
is-icon
ist-Alternativ
Taste
ist-klein
is-icon
ist-Alternativ
Taste
is-secondary
is-icon
ist-Alternativ
Taste
is-secondary
ist-klein
is-icon
ist-Alternativ
Taste
is-link
is-icon
ist-Alternativ
Andere UI-Elemente
kategorie-filter-link
Schieberegler-Pfeil
Tags
Verlinkbare Etiketten, die Informationen auf Karten, Produkten und Beiträgen kategorisieren oder hervorheben
Tag
Tag
Tag
is-text
Tag
Tag
ist-Alternativ
Tag
Tag
is-text
ist-Alternativ
Tag
Formular-Elemente
form_field-label
form_input
form_input
is-text-area
form_input
is-select-Eingang
form_checkbox
form_radio
Taste
Vielen Dank! Ihr Beitrag ist eingegangen!
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
Um Forms auf einem dunklen Hintergrund zu verwenden, benutzen Sie einfach die Add-on-Klasse is-alternate
form_field-label
form_input
form_input
is-text-area
form_input
is-select-Eingang
form_checkbox
form_radio
Taste
Vielen Dank! Ihr Beitrag ist eingegangen!
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
Icons (Bild)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

Icon-Höhe-mittel

icon-height-large

icon-height-xlarge

Icon-Höhe-benutzerdefiniert1

Symbol-1x1-xxklein

Symbol-1x1-xklein

Symbol-1x1-klein

Symbol-1x1-mittel

Symbol-1x1-groß

Symbol-1x1-xgroß

Symbol-1x1-angepasst1

Symbole (HTML-Einbettung)
HTML-Einbettungssymbole ermöglichen es Ihnen, die Farbe des Symbols beim Überfahren zu steuern.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-groß

icon-embed-xlarge

icon-embed-custom1

Radius
Groß
‍GroßerRadius wird auf Elemente angewendet, die 1 oder 2 Spalten breit sind.
MittlererRadius
‍Der mittlereRadius wird auf Elemente angewendet, die zwischen 2 und 3 Spalten breit sind.
Kleiner
‍KleinerRadius wird auf Elemente angewendet, die kleiner als 4 Spalten breit sind.
Auswirkungen
Box Shadows
‍Schattenermöglichen es Ihnen, Entwürfen Tiefe und Realismus zu verleihen, indem Sie Elemente auf einer Z-Achse positionieren.
schatten-xx-klein
schatten-x-klein
schatten-klein
schatten-medium
schattengroß
schatten-xlarge
schatten-xxgroß
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
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-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Auffüllungen
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
padding-custom1
padding-custom2
padding-custom3
Margen
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
Abstandshalter
Einheitliches Abstandshaltersystem für das Projekt.
Abstandshalter-klein
Abstandshalter-xxklein
Abstandshalter-xklein
Abstandshalter-klein
Abstandshalter-medium
Abstandshalter-groß
Abstandshalter-xlarge
Abstandshalter-xxgroß
Abstandshalter-groß
Abstandshalter-xhuge
abstandhalter-xxhuge
Utility-Klassen
Nützliche 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-auto
Zeiger-Ereignisse-keine
Ebene
abstand-sauber
ausrichten-zentrieren
z-index-1
z-index-2
display-inlineflex
Rand-oben-Automatik
Seitenverhältnis-Quadrat
seitenverhältnis-portrait
aspekt-verhältnis-landschaft
seitenverhältnis-breitbild
inherit-color