Semantic Tokens Layouts

Layouts

Cards

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-card-body-content-justifyflex-startAusrichtung des Inhalts im Body-Segment der Card.
layout-card-segment-content-gapspacing-smallVertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.
layout-card-segment-padding-topcard-segment-padding-verticalOberer Innenabstand von Card-Segmenten.
layout-card-segment-padding-rightcard-segment-padding-horizontalRechter Innenabstand von Card-Segmenten.
layout-card-segment-padding-bottomcard-segment-padding-verticalUnterer Innenabstand von Card-Segmenten.
layout-card-segment-padding-leftcard-segment-padding-horizontalLinker Innenabstand von Card-Segmenten.
layout-card-body-padding-toplayout-card-segment-padding-topOberer Innenabstand des Card-Body-Segments.
layout-card-body-padding-rightlayout-card-segment-padding-rightRechter Innenabstand des Card-Body-Segments.
layout-card-body-padding-bottomlayout-card-segment-padding-bottomUnterer Innenabstand des Card-Body-Segments.
layout-card-body-padding-leftlayout-card-segment-padding-leftLinker Innenabstand des Card-Body-Segments.
layout-card-body-text-margin0Textabstand im Card-Body; verhindert zusätzliche Default-Margins.

Interactive Elements

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-tab-navigation-large-padding-inlineinteraction-padding-horizontalHorizontaler Innenabstand für große Tab-Navigationen.
layout-input-label-widthdimension-input-label-widthDesktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.
layout-input-field-desktop-widthdimension-input-field-desktop-widthFixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.
layout-input-field-max-widthdimension-input-field-max-widthMaximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).
layout-search-field-widthdimension-search-field-widthFixe Breite des Suchfeld-Inputs.
layout-pulldown-panel-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand des geöffneten Pulldown-Panels.
layout-pulldown-option-padding-inlinecompact-interaction-padding-horizontalHorizontaler Innenabstand der einzelnen Pulldown-Optionen.
layout-pulldown-padding-inlinecompact-interaction-padding-horizontalInnenabstand links für Pulldown-Trigger und Select-Felder.
layout-pulldown-chevron-offsetcompact-interaction-padding-horizontalRechter Innenabstand des Chevron-Icons im Pulldown.
layout-pulldown-chevron-reserved-spacespacing-largeReservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.
layout-mode-toggle-local-heightcompact-interaction-heightHöhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.
layout-mode-toggle-local-width-factor3Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.
layout-mode-toggle-widthcalc(interaction-height * 3.5)Standardbreite des Mode-Toggles in regulären Varianten.
layout-help-panel-widthcalc(interaction-height * 8)Standardbreite des Help-Panels.

Typography

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-preview-align-itemsflex-startVertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.

Pattern Layout Tokens

Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Layout
layout-options-row-margin-topspacing-smallAbstand oberhalb der Options Row.
layout-options-row-main-gapspacing-largeHorizontaler Abstand zwischen linker und rechter Aktionsgruppe.
layout-options-row-group-gapspacing-smallAbstand zwischen Controls innerhalb der linken und rechten Gruppe.
layout-options-row-mode-toggle-widthdimension-options-row-mode-toggle-widthBreite des Mode-Toggles innerhalb der Options Row.
layout-options-row-help-panel-widthdimension-options-row-help-panel-widthBreite des Help-Panels innerhalb der Options Row.
layout-object-card-min-widthdimension-object-card-min-widthMindestbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-max-widthdimension-object-card-max-widthMaximalbreite der Object Card im horizontalen Desktop-Layout.
layout-object-card-heightdimension-object-card-heightFixe Höhe der Object Card im Desktop-Layout.
layout-object-card-mobile-widthdimension-object-card-mobile-widthVolle verfügbare Breite der Object Card auf Mobile.
layout-object-card-mobile-heightdimension-object-card-mobile-heightInhaltsabhängige Höhe der Object Card auf Mobile.
layout-object-card-desktop-breakpointdimension-object-card-desktop-breakpointBreakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.
layout-object-card-content-growdimension-object-card-content-growFlex-Grow-Wert für das vorletzte Segment der Object Card.
layout-object-card-shared-widthautoGeteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.
layout-content-cards-group-gapspacing-smallAbstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.
layout-card-list-drawer-widthdimension-card-list-drawer-widthBreite des ausziehbaren Card-Listenbereichs relativ zum Container.