Typografie

Textstile

u-text-style-display

Überschrift

u-text-style-h1

Überschrift

u-text-style-h2

Überschrift

u-text-style-h3

Überschrift

u-text-style-h4

Überschrift

u-text-style-h5
Überschrift
u-text-style-h6
Überschrift
u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Gewichte

u-weight-regular

Lorem ipsum dolor

u-Gewicht-mittel

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Zeilenhöhe

u-Zeilenhöhe-klein

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-Zeilenhöhe-mittel

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-Zeilenhöhe-groß

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-Zeilenhöhe-riesig

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Buchstabenabstand

u-Buchstabenabstand-eng

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-letter-spacing-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Leitungsschelle

u-line-clamp-1

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.

u-line-clamp-2

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.

u-line-clamp-3

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.

u-line-clamp-4

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.

Ausrichtung

u-ausrichtung-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-ausrichtung-Mitte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-ausrichtung-ende

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Textumwandlung

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Textumfluss

u-text-wrap-default

Normale Textumbrüche. Nützlich, um die Textumbrüche eines untergeordneten Elements zurückzusetzen, wenn das übergeordnete Element die Eigenschaften „balance“ oder „pretty“ aufweist.

u-text-wrap-balance

Sorgt für eine gleichmäßige und einheitliche Zeilenbreite bei bis zu sechs Textzeilen. Ideal für kurze Inhalte.

u-text-wrap-pretty

Stellt sicher, dass die letzte Zeile des Textes mehr als ein Wort enthält. Ideal für längere Texte.

Typografische Elemente

u-Rich-Text

Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Abbildung
Geordnete Liste
  1. Geordnete Liste
  2. wenn man nicht drinnen ist
  3. Rich-Text
  1. Geordnete Liste
  2. wenn man drinnen ist
  3. Rich-Text
Ungeordnete Liste
  • Ungeordnete Liste
  • wenn man nicht drinnen ist
  • Rich-Text
  • Ungeordnete Liste
  • wenn man drinnen ist
  • Rich-Text
Blockzitate
Blockzitat, wenn es sich nicht innerhalb eines Rich-Text-Elements befindet
Blockzitat innerhalb eines Rich-Text-Elements
u-Überschrift-Akzent

Überschrift – Betonung des Wortes

Farbe

Themen

u-theme-inherit
u-theme-light
u-theme-dark
u-theme-brand

Textfarbe

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Hintergrundfarbe

u-background-transparent
u-hintergrund-1
u-hintergrund-2
u-Hintergrund-Skelett

Flexbox

Hilfsmittel zur Flex-Ausrichtung

u-flex-horizontal-wrap
u-flex-vertical-nowrap
u-flex-horizontal-nowrap
u-flex-vertical-wrap

„Align Self Utilities“

u-align-self-inherit
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Hilfsmittel zum Ausrichten von Elementen

u-align-items-inherit
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Hilfsmittel zum Ausrichten von Inhalten

u-justify-content-inherit
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around

Flex-Basis-Dienstprogramme

u-flex-shrink
u-flex-grow
u-flex-noshrink

Raster

Netzdienstprogramme

u-grid-autofit
u-grid-autofill
u-grid-custom
u-grid-breakout
u-Gitter-Untergitter

Dienstprogramme zum Starten von Spalten

u-column-start-auto
u-column-start-1
u-column-start-2
u-column-start-3
u-column-start-4
u-column-start-5
u-column-start-6
u-column-start-7
u-column-start-8
u-column-start-9
u-column-start-10
u-column-start-11
u-column-start-12

Spalten-Dienstprogramme

u-column-span-full
u-column-span-indent
u-column-span-1
u-column-span-2
u-column-span-3
u-column-span-4
u-column-span-5
u-column-span-6
u-column-span-7
u-column-span-8
u-column-span-9
u-column-span-10
u-column-span-11
u-column-span-12

Dienstprogramme für den Zeilenstart

u-row-start-auto
u-row-start-1
u-row-start-2
u-row-start-3
u-row-start-4
u-row-start-5
u-row-start-6

Row-Span-Dienstprogramme

u-row-span-1
u-row-span-2
u-row-span-3
u-row-span-4
u-row-span-5
u-row-span-6

Dienstprogramme bestellen

u-order-first
u-order-last

Größen

Gap Utilities

u-gap-inherit
u-Spalt-Rinne
u-gap-0
u-gap-1
u-gap-2
u-gap-3
u-gap-4
u-gap-5
u-gap-6
u-gap-7
u-gap-8

Hilfsprogramme für Zeilenabstände

u-gap-row-inherit
u-gap-row-gutter
u-gap-row-0
u-gap-row-1
u-gap-row-2
u-gap-row-3
u-gap-row-4
u-gap-row-5
u-gap-row-6
u-gap-row-7
u-gap-row-8

Margin Top Versorgungsunternehmen

u-margin-top-auto
u-margin-top-gutter
u-margin-top-text
u-margin-top-0
u-margin-top-1
u-margin-top-2
u-margin-top-3
u-margin-top-4
u-margin-top-5
u-margin-top-6
u-margin-top-7
u-margin-top-8

Rand unten – Hilfsfunktionen

u-margin-bottom-auto
u-margin-bottom-gutter
u-margin-bottom-text
u-margin-bottom-0
u-margin-bottom-1
u-margin-bottom-2
u-margin-bottom-3
u-margin-bottom-4
u-margin-bottom-5
u-margin-bottom-6
u-margin-bottom-7
u-margin-bottom-8

Füllfunktionen

u-padding-sitemargin
u-Abstandhalter-Rinne
u-padding-0
u-padding-1
u-padding-2
u-padding-3
u-padding-4
u-padding-5
u-padding-6
u-padding-7
u-padding-8
u-padding-small
u-padding-main
u-padding-large

Dienstprogramme für Padding-Blöcke

u-padding-block-sitemargin
u-padding-block-gutter
u-padding-block-0
u-padding-block-1
u-padding-block-2
u-padding-block-3
u-padding-block-4
u-padding-block-5
u-padding-block-6
u-padding-block-7
u-padding-block-8
u-padding-block-small
u-padding-block-main
u-padding-block-large

Inline-Hilfsfunktionen zum Auffüllen

u-padding-inline-sitemargin
u-padding-inline-gutter
u-padding-inline-0
u-padding-inline-1
u-padding-inline-2
u-padding-inline-3
u-padding-inline-4
u-padding-inline-5
u-padding-inline-6
u-padding-inline-7
u-padding-inline-8

Padding – Wichtigste Funktionen

u-padding-top-sitemargin
u-padding-top-gutter
u-padding-top-0
u-padding-top-1
u-padding-top-2
u-padding-top-3
u-padding-top-4
u-padding-top-5
u-padding-top-6
u-padding-top-7
u-padding-top-8
u-padding-top-small
u-padding-top-main
u-padding-top-large
u-padding-top-pagetop

Funktionen für die Bodenpolsterung

u-padding-bottom-sitemargin
u-padding-bottom-gutter
u-padding-bottom-0
u-padding-bottom-1
u-padding-bottom-2
u-padding-bottom-3
u-padding-bottom-4
u-padding-bottom-5
u-padding-bottom-6
u-padding-bottom-7
u-padding-bottom-8
u-padding-bottom-small
u-padding-bottom-main
u-padding-bottom-large
u-padding-bottom-pagetop

Hilfsfunktionen für die linke Ausfüllung

u-padding-left-sitemargin
u-padding-left-gutter
u-padding-left-0
u-padding-left-1
u-padding-left-2
u-padding-left-3
u-padding-left-4
u-padding-left-5
u-padding-left-6
u-padding-left-7
u-padding-left-8

Funktionen zum Auffüllen nach rechts

u-padding-right-sitemargin
u-padding-right-gutter
u-padding-right-0
u-padding-right-1
u-padding-right-2
u-padding-right-3
u-padding-right-4
u-padding-right-5
u-padding-right-6
u-padding-right-7
u-padding-right-8

Funktionen für den Rahmenradius

u-radius-none
u-radius-inherit
u-radius-small
u-radius-main
u-radius-round

Dienstprogramme für das Seitenverhältnis

u-Verhältnis-Auto
u-Verhältnis-2-1
u-Verhältnis-16-9
u-Verhältnis-3-2
u-Verhältnis-5-4
u-Verhältnis-1-1
u-Verhältnis-4-5
u-Verhältnis-2-3

Verschiedenes

Anzeige-Dienstprogramme

u-display-block
u-display-inline-block
u-display-inline-flex
u-display-inline-grid
u-display-inline
u-display-contents
u-display-none
u-hide-if-empty-cms

Overflow-Dienstprogramme

u-overflow-visible
u-overflow-hidden
u-overflow-clip
u-overflow-x-auto
u-overflow-y-auto
u-overflow-hidden-left

Z-Index-Dienstprogramme

u-zindex-negativ
u-zindex-0
u-zindex-unset
u-zindex-1
u-zindex-2
u-zindex-3

Position: Versorgungsunternehmen

u-position-static
u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky

Element-Dienstprogramme

u-grid-wrapper
u-grid
u-content-wrapper
u-image-wrapper
u-image
u-Höhe-voll
u-iframe-wrapper
u-iframe
u-Overlay
u-eyebrow-{wrapper-layout-marker-text}
u-text
u-button-wrapper
u-video
u-svg
u-path
U-Profil
u-container
u-container-small
u-container-full
u-embed-js
u-embed-css

Sonstige Dienstprogramme

u-width-auto
u-min-width-auto
u-max-width-none
u-max-width-full
u-width-full
u-Höhe-voll
u-height-auto
u-text-trim-off
u-button-wrapper
u-margin-inline-auto
u-margin-trim
u-ignore-trim
u-Zeiger-ein
u-Zeiger-aus
u-object-fit-cover
u-object-fit-contain
u-min-height-screen
u-cover
u-cover-absolute
nur für u-sr

Komponenten

Schaltflächen