AccentBox

Playground

In der <AccentBox /> lassen sich Inhalte platzieren, die sich bewusst vom restlichen Content abheben sollen. Die Component sorgt dabei für die Hintergrundfarbe und das Padding. Die Inhalte innerhalb der Box können mithilfe von Struktur-Components wie Section oder Flex angeordnet werden.

import {
  AccentBox,
  Heading,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<AccentBox>
  <Section>
    <Heading>Tipps & Tricks für mehr Klimaschutz</Heading>
    <Text>
      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 Klima
    </Text>
    <Link href="#" target="_blank">
      Blogartikel zu mehr Nachhaltigkeit
    </Link>
  </Section>
</AccentBox>

Color

Je nach Anwendungsfall stehen für die AccentBox die Colors Blue, Green und Neutral zur Verfügung. Blue ist dabei als Standard definiert.

Blue, Green und Neutral

Die Colors haben unterschiedliche Wirkungen auf den User und sollten daher gezielt entsprechend der gewünschten Wirkung eingesetzt werden.

Bei Verwendung der Color Green erscheinen enthaltene Components automatisch in der Dark-Variante (siehe Light und Dark Color) dargestellt, um die nötigen Kontraste sicherzustellen.

Kombiniere mit ...

Icon

Ein direkt in der AccentBox platziertes Icon wird als dekoratives Hintergrundbild angezeigt.

LayoutCard

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