# Unterstützte Darstellungsoptionen

Prüfen Sie die für eingebettete Komponenten verfügbaren Darstellungsoptionen.

Das [Figma UI-Toolkit mit eingebetteten Komponenten](https://www.figma.com/community/file/1438614134095442934) enthält alle Komponenten, allgemeine Muster und eine Beispielanwendung. Sie können damit eingebettete Nutzeroberflächen in Ihrer Website visualisieren und gestalten.

Sie können jede der folgenden `appearance`-Eigenschaften auf der [Anpassungsseite](https://docs.stripe.com/connect/customize-connect-embedded-components.md) verwenden. Diese Seite generiert auch automatisch ein Snippet, das Sie basierend auf den angegebenen `appearance`-Parametern auf Ihrer Website verwenden können.

Diese Optionen stellen die einzige Möglichkeit dar, die Stile von in Connect eingebetteten Komponenten zu ändern. Sie können die Stile nicht mit CSS-Selektoren oder anderen Mechanismen überschreiben.

> #### Notwendige Popups
> 
> Einige Verhaltensweisen in eingebetteten Komponenten, wie z. B. die [Nutzerauthentifizierung](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), werden immer in einem Popup angezeigt. Sie können die eingebettete Komponente nicht so anpassen, dass solche Popups vermieden werden.

Informationen zum `Variablen`-Objekt für mobile SDKs finden Sie unter den folgenden Links:

- [iOS](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance)
- [Android](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/index.html)

## Variablen

Das `variables`-Objekt enthält die folgenden optionalen Eigenschaften, die für alle in Connect eingebetteten Komponenten in Ihrer Anwendung gelten.

### Häufig genutzte Variablen

| Name | Typ | Beispielwert | **Description** |
| --- | --- | --- | --- |
| `fontFamily` | Zeichenfolge | `sans-serif` | Der Wert der [Schriftfamilie](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family), der in allen eingebetteten Komponenten verwendet wird. Wenn eine eingebettete Komponente einen `font-family`-Wert von einem Element auf Ihrer Website übernimmt, in dem sie platziert ist, überschreibt diese Einstellung diese Übernahme. |
| `fontSizeBase` | Zeichenfolge | `16px` | Die festgelegte Basisschriftgröße der eingebetteten Grundkomponente. Dadurch wird der Wert anderer Variablen für die Schriftgröße skaliert. Es werden nur Pixelwerte unterstützt. |
| `spacingUnit` | Zeichenfolge | `8px` | Die Basis-Abstandseinheit, von der alle anderen Abstandswerte abgeleitet werden. Erhöhen oder verringern Sie diesen Wert, um Ihrem Layout mehr oder weniger Platz zu geben. Es werden nur Pixelwerte unterstützt. |
| `borderRadius` | Zeichenfolge | `15px` | Der in eingebetteten Komponenten verwendete allgemeine Randradius. Dadurch wird der Standard-Randradius für alle Komponenten festgelegt. Es werden nur Pixelwerte unterstützt. |
| `colorPrimary` | Zeichenfolge | `#0074D4` | Die in allen eingebetteten Komponenten verwendete Primärfarbe. Legen Sie hier Ihre primäre Markenfarbe fest. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `colorBackground` | Zeichenfolge | `#FFFFFF` | Die Hintergrundfarbe für eingebettete Komponenten, einschließlich Overlays, Tooltipps und Popovers. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `colorText` | Zeichenfolge | `#444444` | Die für regulären Text verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `colorDanger` | Zeichenfolge | `#DF1B41` | Die Farbe zur Kennzeichnung von Fehlern oder schädlichen Aktionen. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |

### Weniger häufig genutzte Variablen

| Name | Typ | Beispielwert | **Description** |
| --- | --- | --- | --- |
| `buttonPrimaryColorBackground` | Zeichenfolge | `#0074D4` | Die Farbe, die als Hintergrund für primäre Schaltflächen verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `buttonPrimaryColorBorder` | Zeichenfolge | `#0074D4` | Die für primäre Schaltflächen verwendete Rahmenfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `buttonPrimaryColorText` | Zeichenfolge | `#FFFFFF` | Die für primäre Schaltflächen verwendete Textfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `buttonSecondaryColorBackground` | Zeichenfolge | `#EBEEF1` | Die Farbe, die als Hintergrundfarbe für sekundäre Schaltflächen verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `buttonSecondaryColorBorder` | Zeichenfolge | `#EBEEF1` | Die Farbe, die als Rahmenfarbe für sekundäre Schaltflächen verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `buttonSecondaryColorText` | Zeichenfolge | `#393B3E` | Die für sekundäre Schaltflächen verwendete Textfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `buttonDangerColorBackground` | Zeichenfolge | `#E61947` | Die Farbe, die wir als Hintergrund für Gefahrenschaltflächen verwenden, um destruktive Aktionen anzuzeigen. Dieser Wert akzeptiert Hex-Werte oder RGB/HSL-Zeichenfolgen. |
| `buttonDangerColorBorder` | Zeichenfolge | `#E61947` | Die Rahmenfarbe für Gefahrenschaltflächen, um destruktive Aktionen anzuzeigen. Es werden Hex-Werte oder RGB/HSL-Zeichenfolgen akzeptiert. |
| `buttonDangerColorText` | Zeichenfolge | `#FFFFFF` | Die Textfarbe für Gefahrenschaltflächen, um destruktive Aktionen anzuzeigen. Es werden Hex-Werte oder RGB/HSL-Zeichenfolgen akzeptiert. |
| `buttonPaddingX` | Zeichenfolge | `4px` | Die horizontale Füllung für Schaltflächen. Dies unterstützt nur Pixelwerte. |
| `buttonPaddingY` | Zeichenfolge | `4px` | Die vertikale Füllung für Schaltflächen. Dies unterstützt nur Pixelwerte. |
| `buttonLabelFontSize` | Zeichenfolge | `16px` | Die Schriftgröße für die Typografie der Schaltflächenbeschriftung. Die Typografievariablen der Schaltflächenbeschriftung akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `buttonLabelFontWeight` | Zeichenfolge | `400` | Die Schriftstärke für die Typografie der Schaltflächenbeschriftung. Die Typografievariablen der Schaltflächenbeschriftung akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `buttonLabelTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie der Schaltflächenbeschriftung. Die Typografievariablen der Schaltflächenbeschriftung akzeptieren einen gültigen [Texttransformationswert](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `colorSecondaryText` | Zeichenfolge | `#717171` | Die für sekundären Text verwendete Farbe. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `actionPrimaryColorText` | Zeichenfolge | `#0074D4` | Die für primäre Aktionen und Links verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `actionPrimaryTextDecorationLine` | Zeichenfolge | `underline` | Der Linientyp, der für die Textdekoration von primären Aktionen und Links verwendet wird. Dies akzeptiert einen gültigen [Text-Dekorationslinie](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) Wert. |
| `actionPrimaryTextDecorationColor` | Zeichenfolge | `#0074D4` | Die Farbe, die für die Textdekoration von primären Aktionen und Links verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `actionPrimaryTextDecorationStyle` | Zeichenfolge | `solid` | Der Textdekorationsstil für primäre Aktionen und Links. Akzeptiert einen gültigen [Textdekorationsstil](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style). |
| `actionPrimaryTextDecorationThickness` | Zeichenfolge | `1px` | Der Textdekorationsstil für primäre Aktionen und Links. Akzeptiert einen gültigen [Textdekorationsstil](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness). |
| `actionPrimaryTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die primären Aktionen und Links. Dadurch wird ein gültiger [Texttransformationswert](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) akzeptiert. |
| `actionSecondaryColorText` | Zeichenfolge | `#444444` | Die für sekundäre Aktionen und Links verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `actionSecondaryTextDecorationLine` | Zeichenfolge | `underline` | Der Linientyp, der für die Textdekoration von sekundären Aktionen und Links verwendet wird. Akzeptiert eine gültige [Textdekorationszeile](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line). |
| `actionSecondaryTextDecorationColor` | Zeichenfolge | `#0074D4` | Die Farbe, die für die Textdekoration von sekundären Aktionen und Links verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `actionSecondaryTextDecorationStyle` | Zeichenfolge | `solid` | Der Textdekorationsstil für sekundäre Aktionen und Links. Akzeptiert einen gültigen [Textdekorationsstil](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style). |
| `actionSecondaryTextDecorationThickness` | Zeichenfolge | `1px` | Der Textdekorationsstil für sekundäre Aktionen und Links. Akzeptiert einen gültigen [Textdekorationsstil](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness). |
| `actionSecondaryTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die sekundären Aktionen und Links. Dadurch wird ein gültiger [Texttransformationswert](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) akzeptiert. |
| `badgeNeutralColorBackground` | Zeichenfolge | `#E4ECEC` | Mit dieser Hintergrundfarbe wird ein neutraler Zustand oder das Fehlen eines Zustands in Status-Badges angezeigt. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeNeutralColorText` | Zeichenfolge | `#545969` | Mit dieser Textfarbe wird ein neutraler Zustand oder das Fehlen eines Zustands in Status-Badges angezeigt. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeNeutralColorBorder` | Zeichenfolge | `#CBD5D6` | Mit dieser Rahmenfarbe wird ein neutraler Zustand oder das Fehlen eines Zustands in Status-Badges angezeigt. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `badgeSuccessColorBackground` | Zeichenfolge | `#CEF6BB` | Die Hintergrundfarbe, mit der ein erfolgreiches Ergebnis bei Status-Badges hervorgehoben wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeSuccessColorText` | Zeichenfolge | `#05690D` | Die Textfarbe, mit der ein erfolgreiches Ergebnis bei Status-Badges hervorgehoben wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeSuccessColorBorder` | Zeichenfolge | `#B4E1A2` | Die Rahmenfarbe, mit der ein erfolgreiches Ergebnis bei Status-Badges hervorgehoben wird. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `badgeWarningColorBackground` | Zeichenfolge | `#FCEEBA` | Die Hintergrundfarbe für Status-Badges bei Problemen, die möglicherweise ein Eingreifen erfordern, deren Behebung jedoch optional ist. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeWarningColorText` | Zeichenfolge | `#A82C00` | Die Textfarbe für Status-Badges bei Problemen, die möglicherweise ein Eingreifen erfordern, deren Behebung jedoch optional ist. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeWarningColorBorder` | Zeichenfolge | `#F5DA80` | Die Rahmenfarbe für Status-Badges bei Problemen, die möglicherweise ein Eingreifen erfordern, deren Behebung jedoch optional ist. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `badgeDangerColorBackground` | Zeichenfolge | `#F9E4F1` | Die Hintergrundfarbe bei Status-Badges zur Verwendung in kritischen Situationen mit hoher Priorität, in denen unmittelbarer Handlungsbedarf besteht, und um auf fehlgeschlagene oder erfolglose Vorgänge hinzuweisen. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeDangerColorText` | Zeichenfolge | `#B3063D` | Die Textfarbe bei Status-Badges zur Verwendung in kritischen Situationen mit hoher Priorität, in denen unmittelbarer Handlungsbedarf besteht, und um auf fehlgeschlagene oder erfolglose Vorgänge hinzuweisen. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `badgeDangerColorBorder` | Zeichenfolge | `#F2C9E3` | Die Rahmenfarbe bei Status-Badges zur Verwendung in kritischen Situationen mit hoher Priorität, in denen unmittelbarer Handlungsbedarf besteht, und um auf fehlgeschlagene oder erfolglose Vorgänge hinzuweisen. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `badgePaddingX` | Zeichenfolge | `6px` | Die horizontale Füllung für Badges. Dies unterstützt nur Pixelwerte. |
| `badgePaddingY` | Zeichenfolge | `2px` | Die vertikale Füllung für Badges. Dies unterstützt nur Pixelwerte. |
| `badgeLabelFontSize` | Zeichenfolge | `14px` | Die Schriftgröße für die Typografie des Badge-Labels. Die Typografievariablen des Badge-Labels akzeptieren einen gültigen [Schriftgrößenwert](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `badgeLabelFontWeight` | Zeichenfolge | `400` | Die Schriftstärke für die Typografie des Badge-Labels. Die Typografievariablen des Badge-Labels akzeptieren einen gültigen [Schriftstärkewert](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `badgeLabelTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie von Badge-Labels. Die Typografievariablen der Schaltflächenbeschriftung akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `offsetBackgroundColor` | Zeichenfolge | `#FFFFFF` | Die Hintergrundfarbe, die zur Hervorhebung von Informationen dient, wie zum Beispiel die ausgewählte Zeile in einer Tabelle oder ein bestimmtes Element der Nutzeroberfläche. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `formBackgroundColor` | Zeichenfolge | `#FFFFFF` | Die für Formularelemente verwendete Hintergrundfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `colorBorder` | Zeichenfolge | `#D7D7D7` | Die Farbe, die für die Rahmen der Komponente verwendet wird. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `formHighlightColorBorder` | Zeichenfolge | `#D7D7D7` | Die Farbe, die verwendet wird, um fokussierte Formularelemente hervorzuheben. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. |
| `formAccentColor` | Zeichenfolge | `#0074D4` | Die Farbe, die zum Füllen von Formularelementen wie Kontrollkästchen, Optionsfeldern und Schaltern verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
| `formPlaceholderTextColor` | Zeichenfolge | `#757575` | Die Farbe für Platzhaltertext in Formularelementen. Es werden Hex-Werte oder RGB/HSL-Zeichenfolgen akzeptiert. |
| `inputFieldPaddingX` | Zeichenfolge | `8px` | Die horizontale Füllung für Eingabefelder in Formularen. Dies unterstützt nur Pixelwerte. |
| `inputFieldPaddingY` | Zeichenfolge | `4px` | Die vertikale Füllung für Eingabefelder in Formularen. Dies unterstützt nur Pixelwerte. |
| `tableRowPaddingY` | Zeichenfolge | `8px` | Die vertikale Füllung für Tabellenzeilen. Dies unterstützt nur Pixelwerte. |
| `buttonBorderRadius` | Zeichenfolge | `4px` | Der für Schaltflächen verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. |
| `formBorderRadius` | Zeichenfolge | `6px` | Der für Formularelemente verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. |
| `badgeBorderRadius` | Zeichenfolge | `4px` | Der für Badges verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. |
| `overlayBorderRadius` | Zeichenfolge | `8px` | Der für Overlays verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. |
| `overlayZIndex` | Zahl | `1000` | Ein [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index), der für das Overlay aller eingebetteten Komponenten verwendet wird. Legen Sie diese Zahl fest, um die z-Reihenfolge des Overlays zu steuern. |
| `overlayBackdropColor` | Zeichenfolge | `#F9E4F1` | Die Hintergrundfarbe, wenn ein Overlay geöffnet wird. Akzeptiert Hexadezimalwerte oder RGB/RGBA/HSL-Zeichenfolgen. |
| `bodyMdFontSize` | Zeichenfolge | `16px` | Die Schriftgröße für die Typografie des mittleren Textfeldes. Die Variablen für die Typografie des Textfeldes akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `bodyMdFontWeight` | Zeichenfolge | `400` | Die Schriftstärke für die Typografie des mittleren Textfeldes. Die Variablen des Textfeldes akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `bodySmFontSize` | Zeichenfolge | `14px` | Die Schriftgröße für die Typografie des kleinen Textfeldes. Die Variablen für die Typografie des Textfeldes akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `bodySmFontWeight` | Zeichenfolge | `400` | Die Schriftstärke für die Typografie des kleinen Textfeldes. Die Variablen des Textfeldes akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `headingXlFontSize` | Zeichenfolge | `28px` | Die Schriftgröße für die Typografie der extra großen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `headingXlFontWeight` | Zeichenfolge | `700` | Die Schriftstärke für die Typografie der extra großen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `headingXlTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie der extra großen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `headingLgFontSize` | Zeichenfolge | `24px` | Die Schriftgröße für die Typografie der großen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `headingLgFontWeight` | Zeichenfolge | `700` | Die Schriftstärke für die Typografie der großen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `headingLgTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie der großen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `headingMdFontSize` | Zeichenfolge | `20px` | Die Schriftgröße für die Typografie der mittleren Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `headingMdFontWeight` | Zeichenfolge | `700` | Die Schriftstärke für die Typografie der mittleren Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `headingMdTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie der mittleren Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `headingSmFontSize` | Zeichenfolge | `16px` | Die Schriftgröße für die Typografie der kleinen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `headingSmFontWeight` | Zeichenfolge | `700` | Die Schriftstärke für die Typografie der kleinen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `headingSmTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie der kleinen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `headingXsFontSize` | Zeichenfolge | `12px` | Die Schriftgröße für die Typografie der extra kleinen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `headingXsFontWeight` | Zeichenfolge | `700` | Die Schriftstärke für die Typografie der extra kleinen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `headingXsTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie der extra kleinen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `labelMdFontSize` | Zeichenfolge | `14px` | Die Schriftgröße für die Typografie des mittleren Labels. Die Variablen für die Label-Typografie akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `labelMdFontWeight` | Zeichenfolge | `400` | Die Schriftstärke für die Typografie des mittleren Labels. Die Variablen des Labels akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `labelMdTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie des mittleren Labels. Label-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |
| `labelSmFontSize` | Zeichenfolge | `12px` | Die Schriftgröße für die Typografie des kleinen Labels. Die Variablen für die Typografie akzeptieren einen gültigen Wert für die [Schriftgröße](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). |
| `labelSmFontWeight` | Zeichenfolge | `400` | Die Schriftstärke für die Typografie des kleinen Labels. Die Variablen des Labels akzeptieren einen gültigen Wert für die [Schriftstärke](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). |
| `labelSmTextTransform` | Zeichenfolge | `uppercase` | Die Texttransformation für die Typografie des kleinen Labels. Label-Typografie-Variablen akzeptieren einen gültigen Wert für die [Texttransformation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform). |

## Overlays

Die Eigenschaft `overlays` steuert, ob eine Dialog-Nutzeroberfläche (auch als Modal bezeichnet) oder eine Schubladen-Nutzeroberfläche für Overlays verwendet werden soll. Wählen Sie das Preis-Leistungs-Verhältnis, das am besten zu Ihrer Website passt.

| Name | Typ | Beispielwert | **Description** |
| --- | --- | --- | --- |
| `overlays` | Zeichenfolge | `dialog` | Der Typ des Overlays, das von eingebetteten Komponenten verwendet wird. Gültige Werte sind `dialog` (Standard) und `drawer`. |