Diese Seite listet alle verfügbaren Klassen. Speichere sie als Lesezeichen — im Alltag ist sie die Seite, die du am häufigsten brauchst.
Alle Klassen werden im Elementor-Feld CSS-Klassen eingetragen, ohne Punkt. Pro Element genau eine Komponenten-Klasse, dazu beliebig viele u--Helfer.
Überschriften
| Klasse | Wofür |
|---|---|
t-heading--display |
Übergroße Hero-Schrift |
t-heading--xxl |
Hauptüberschrift auf Landingpages |
t-heading--xl |
Hauptüberschrift Unterseiten |
t-heading--l |
Sektionsüberschrift (Standard) |
t-heading--m |
Unterüberschrift, Karten-Titel |
t-heading--s |
Kleine Überschrift |
t-heading--xs |
Kleinste Überschrift |
Fließtext
| Klasse | Wofür |
|---|---|
t-text--xl |
Große Einleitung |
t-text--l |
Vorspann, Teaser |
t-text--m |
Standard-Fließtext |
t-text--s |
Hinweistext |
t-text--xs |
Fußnote, Datum, Meta |
t-text--center / t-text--right |
Ausrichtung |
Labels & Badges
Großbuchstaben, leicht gesperrt — für Kategorie-Tags und Zeilen über einer Überschrift.
t-label--m · t-label--s · t-label--xs
Buttons
| Klasse | Wofür |
|---|---|
c-btn--primary |
Wichtigste Aktion, gefüllt |
c-btn--secondary |
Nebenaktion, weiß mit Rahmen |
c-btn--link |
Textlink mit Pfeil, ohne Button-Optik |
Karten
| Klasse | Wofür |
|---|---|
c-card |
Standard-Karte (äußerer Container) |
c-card__media |
Bild-Box innerhalb der Karte |
c-card__inner |
Inhalts-Box innerhalb der Karte |
c-card--interactive |
Klickbare Karte mit Hover-Effekt |
c-card--featured |
Hervorgehobene Karte |
Layout
| Klasse | Wofür |
|---|---|
l-section |
Standard-Sektion: begrenzte Breite, zentriert |
l-section--hero |
Bildschirmhohe Einstiegssektion |
l-section--xxl … --xxs |
Sektion mit definiertem Abstand oben/unten |
l-stack |
Elemente untereinander mit gleichem Abstand |
l-cluster |
Elemente nebeneinander, umbrechend |
l-grid |
Raster, Spaltenzahl automatisch |
l-grid--2col / --3col / --4col |
Raster mit fester Spaltenzahl |
Formulare
f-field-group · f-label · f-input · f-select · f-help · f-error
Helfer
Diese dürfen zusätzlich zur Komponenten-Klasse stehen.
| Klasse | Wofür |
|---|---|
u-mb--xxs … u-mb--5xl |
Abstand nach unten |
u-p--0 … u-p--5xl |
Innenabstand |
u-gap--xxs … u-gap--5xl |
Abstand zwischen Elementen |
u-w--xs … u-w--xl, u-w--full |
Maximale Breite |
u-rad--s / --m / --l |
Eckenrundung |
u-bg--default / --muted / --sunken / --accent |
Hintergrundfarbe |
u-bd--default / --muted |
Rahmen |
u-sh--m / --l |
Schatten |
u-text--on-dark |
Textfarbe für dunklen Hintergrund |
u-text--muted |
Dezente Textfarbe |
u-hide--mobile |
Auf dem Handy ausblenden |
u-hide--desktop |
Am Desktop ausblenden |
Die Größen-Skala
Überall gleich, von klein nach groß:
xxs · xs · s · m · l · xl · xxl · 3xl · 4xl · 5xl
Achtung: Es gibt kein
sm, md, lg und kein 3xs oder 2xs. Diese Namen kennt das System nicht — die Klasse würde wirkungslos bleiben.