‍

Components

Integrations

AccentBox

Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.

Hilf uns, Flow noch besser zu machen!

Fehlt dir eine bestimmte Component oder etwas anderes? Hast du Feedback? Dann teile es uns gerne auf GitHub mit.Feedback zu Flow geben‍
<AccentBox backgroundColor="blue">
  <Section>
    <Heading>Hilf uns, Flow noch besser zu machen!</Heading>
    <Text>
      Fehlt dir eine bestimmte Component oder etwas anderes?
      Hast du Feedback? Dann teile es uns gerne auf GitHub
      mit.
    </Text>
    <Link href="#" target="_blank">
      Feedback zu Flow geben
    </Link>
  </Section>
</AccentBox>

Best Practices

  • Setze die AccentBox sparsam ein, um gezielt Aufmerksamkeit zu lenken.
  • Platziere keine kritischen Inhalte in der AccentBox. Müssen Informationen zwingend wahrgenommen werden, nutze stattdessen einen Alert‍.
  • Sorge für ausreichenden Kontrast zum Inhalt. Das gilt besonders bei mit der Color‍-Component eingefärbten Texten; reicht der Kontrast nicht, nutze die Light oder Dark Color‍.

AccentBox vs. Alert

AccentBoxen und Alerts‍ dienen beide dazu, dem User zusätzliche Informationen bereitzustellen. Eine einfache Faustregel hilft bei der Entscheidung: Kann die Information ignoriert werden, ohne negative Folgen? Dann ist eine AccentBox die richtige Wahl. Wenn das Ignorieren hingegen zu Problemen führen könnte – etwa bei sicherheitsrelevanten Hinweisen oder wichtigen Systemmeldungen – sollte ein Alert mit entsprechendem Status verwendet werden.

Verwende AccentBoxen, um z. B. ...

  • ergänzende, aber nicht kritische Hinweise anzuzeigen.
  • kontextuelle Informationen oder Tipps zu geben.
  • visuell strukturierende Inhalte einzubetten, ohne zu unterbrechen.

Verwende Alerts, um z. B. ...

  • den User auf sicherheits- oder funktionsrelevante Informationen hinzuweisen.
  • vor möglichen Problemen oder Systemzuständen zu warnen.
  • dringende oder aktionsrelevante Statusmeldungen zu kommunizieren.

Background Color

Base Colors

Die AccentBox unterstützt die Basisfarben Blue und Neutral (Default). Diese helfen dabei, Inhalte für den User dezent hervorzuheben.

250 msDateioperationen
Geringer Optimierungsbedarf
100 msServeroperationen
Optimierungsbedarf

Brand Colors

Die Brand Colors Navy, Lilac, Sage und Salmon eignen sich besonders für werbliche Inhalte und Marketing-Storys. Auf allen farbigen Hintergründen ist der Inhalt standardmäßig in der Dark Color.

Navy

Lilac

Sage

Salmon

Custom Color

Die AccentBox unterstützt zusätzlich eine benutzerdefinierte Farbe. Diese Option sollte nur in Ausnahmefällen genutzt werden. Für die meisten Use Cases sollten Base Colors oder Brand Colors verwendet werden, damit die visuelle Konsistenz erhalten bleibt.

Tipps & Tricks für mehr Klimaschutz

Dein Cronjob läuft in weniger als 5-Minuten-Intervallen. Das verbraucht mehr Ressourcen. Falls das nicht unbedingt nötig ist, kannst du ein längeres Intervall wählen - das spart Energie und schützt das KlimaBlogartikel zu mehr Nachhaltigkeit‍

Gradient

Eine AccentBox mit Gradient hebt sich visuell stärker hervor. Dadurch eignet sich diese Variante besonders für aufmerksamkeitsstarke Inhalte wie Werbemaßnahmen. Zu jeder Brand Color gibt es einen Gradient: Navy, Sage, Lilac und Salmon.

mStudio Extension selber entwickeln

Veröffentliche eigene Features im mStudio
Contributor Landingpage‍

Background Image

Die AccentBox unterstützt ein Hintergrundbild. Über aspectRatio kann ein festes Seitenverhältnis definiert werden.

Mit Background Image

Kombiniere mit ...

Link

Die AccentBox kann in einen Link‍ gewrappt werden, um die gesamte Component klickbar zu machen.

Verlinkte AccentBox
‍
Verlinkte AccentBox in LayoutCard
‍

LayoutCard

Befindet sich eine AccentBox als erstes Element innerhalb einer LayoutCard‍, füllt sie die gesamte Größe der LayoutCard aus.

mStudio Extension selber entwickeln

Veröffentliche eigene Features im mStudio
Contributor Landingpage‍

Properties

PropertyTypeDescription
aspectRatio
AspectRatio
The aspect ratio of the accent box.
backgroundColor
AccentBoxWithCustomBackgroundColordefault: "neutral"
The background color of the accent box. Besides the Flow colors, any custom CSS color is supported.
backgroundImage
string
The background image of the accent box.
children
ReactNode
color
default | dark | light | dark-static | light-static
The content color of the accent box. Defaults to `dark` on the decorative colors and the gradients, otherwise to `default`.
elementType
div | article | ExoticComponent<{}> | section
The HTML element or React component rendered as the elements root.
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel.

Accessibility

PropertyTypeDescription
aria-describedby
string
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hidden
Booleanish
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-label
string
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
string
Identifies the element (or elements) that labels the current element. @see aria-describedby.

Design Tokens

Größen & Stile

TokenWert
--accent-box--padding16px
--accent-box--corner-radius12px

Farben

TokenLightDark
--accent-box--background-color-neutral#ebeff3#2c2f33
--accent-box--background-color-blue#b2b2f0#211c7f
--accent-box--background-color-navy#c6ceec#2f3551
--accent-box--background-color-lilac#dbcbf8#483b5c
--accent-box--background-color-sage#c5cdcc#3e4241
--accent-box--background-color-salmon#e9c8bd#533f38
--accent-box--background-color-gradient-navylinear-gradient(to top right, #a6b2e7 0%, #b7c1ea 35%, #bbc4ea 50%, #d5dbef 75%, #e2e7f1 100%)linear-gradient(to top right, #25293a 0%, #2e3550 35%, #303653 50%, #414b7a 75%, #49558b 100%)
--accent-box--background-color-gradient-sagelinear-gradient(to top right, #a7b2ac 0%, #b7c0bc 35%, #bac4c0 50%, #d5dcdc 75%, #e3e8ea 100%)linear-gradient(to top right, #272c2c 0%, #2c3232 25%, #323939 50%, #383f3f 75%, #383f3f 100%)
--accent-box--background-color-gradient-lilaclinear-gradient(to top right, #dcb1c2 0%, #d6b0d6 25%, #cdaef0 50%, #d2b9fb 75%, #ddcbfa 100%)linear-gradient(to top right, #553a57 0%, #4f3f73 30%, #604f90 65%, #7c61b1 100%)
--accent-box--background-color-gradient-salmonlinear-gradient(to top right, #e7a48b 0%, #e8b5a3 35%, #e3b8b5 50%, #dbbccf 75%, #d4c0e8 100%)linear-gradient(to top right, #392d2a 0%, #6f5249 35%, #8a655f 50%, #8d6c84 75%, #806a9c 100%)

Auf dieser Seite