# 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 | | ----------------- | ------------ | ------------ | | `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 | | ---------------------------------------- | ------------ | ------------ | | `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 | `#AAAAAA` | 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 | | ---------- | ------------ | ------------ | | `overlays` | Zeichenfolge | `dialog` | Der Typ des Overlays, das von eingebetteten Komponenten verwendet wird. Gültige Werte sind `dialog` (Standard) und `drawer`. |