‍

Components

Integrations

AccentBox

Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.
GitHub‍Markdown‍

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‍
import {
  AccentBox,
  Heading,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<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 Teal, Violet, Lilac, Navy und Green eignen sich besonders für werbliche Inhalte und Marketing-Storys.

Teal

Violet

Lilac

Navy

Green

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.

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

PropertyTypeDefaultDescription
aspectRatioAspectRatio-The aspect ratio of the accent box.
backgroundColorAccentBoxWithCustomBackgroundColor"neutral"The background color of the accent box.
backgroundImagestring-The background image of the accent box.
childrenReactNode-
color"default" | "dark" | "light" | "dark-static" | "light-static""default"The content color of the accent box.
elementType"div" | "article" | ExoticComponent<{}> | "section"-The HTML element or React component rendered as the elements root.
wrapWithReactElement<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.

Accessibility

PropertyTypeDefaultDescription
aria-describedbystring-Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hiddenBooleanish-Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-labelstring-Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledbystring-Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite