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 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>

Color

Beim Verwenden der AccentBox muss während der Entwicklung auf einen ausreichenden Kontrast zwischen Hintergrundfarbe und Inhalt geachtet werden. Falls der Kontrast nicht ausreicht, sollte mit der Light oder Dark Color gearbeitet werden.

Background Color

Base Colors

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

Brand Colors

Die Brand Colors Teal, Violet, Lilac, Navy und Green eignen sich besonders für werbliche Inhalte und Marketing Storys.

[Example]

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.

Gradient

Eine AccentBox mit Gradient hebt sich visuell stärker hervor. Dadurch eignet sich diese Variante besonders für aufmerksamkeitsstarke Inhalte wie Werbemaßnahmen.

Background Image

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

Kombiniere mit ...

Link

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

LayoutCard

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