# AccentBox

Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.

## Overview

# 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](/04-components/structure/section/overview)
oder [Flex](/04-components/structure/flex/overview) angeordnet werden.

```tsx
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](/02-foundations/01-design/02-colors#light-und-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.

```tsx
import {
  AccentBox,
  BigNumber,
  ColumnLayout,
  Flex,
  Rating,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Section>
  <ColumnLayout>
    <AccentBox backgroundColor="neutral">
      <Flex direction="column" gap="s" align="center">
        <BigNumber>
          <Text>250 ms</Text>
          <Text>Dateioperationen</Text>
        </BigNumber>
        <Rating
          value={4}
          isReadOnly
          aria-label="Dateioperationen"
        />
        <Text>
          <small>Geringer Optimierungsbedarf</small>
        </Text>
      </Flex>
    </AccentBox>
    <AccentBox backgroundColor="blue">
      <Flex direction="column" gap="xs" align="center">
        <BigNumber>
          <Text>100 ms</Text>
          <Text>Serveroperationen</Text>
        </BigNumber>
        <Rating
          value={2}
          isReadOnly
          aria-label="Serveroperationen"
        />
        <Text>
          <small>Optimierungsbedarf</small>
        </Text>
      </Flex>
    </AccentBox>
  </ColumnLayout>
</Section>
```

## Brand Colors

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

```tsx
import {
  AccentBox,
  Heading,
} from "@mittwald/flow-react-components";

<>
  <AccentBox backgroundColor="teal">
    <Heading>Teal</Heading>
  </AccentBox>
  <AccentBox backgroundColor="violet">
    <Heading>Violet</Heading>
  </AccentBox>
  <AccentBox backgroundColor="lilac">
    <Heading>Lilac</Heading>
  </AccentBox>
  <AccentBox backgroundColor="navy">
    <Heading>Navy</Heading>
  </AccentBox>
  <AccentBox backgroundColor="green">
    <Heading>Green</Heading>
  </AccentBox>
</>
```

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

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

<AccentBox backgroundColor="#d8f5d6" color="dark-static">
  <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>
```

## Gradient

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

```tsx
import {
  AccentBox,
  Color,
  Flex,
  Heading,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<AccentBox backgroundColor="gradient" color="dark">
  <Flex align="center" wrap="wrap" gap="m">
    <Flex direction="column" grow>
      <Heading size="l">
        <Color color="violet">mStudio Extension</Color>{" "}
        selber entwickeln
      </Heading>
      <Text>
        <strong>
          Veröffentliche{" "}
          <Color color="violet">eigene Features</Color> im
          mStudio
        </strong>
      </Text>
    </Flex>
    <Link target="_blank" href="#">
      Contributor Landingpage
    </Link>
  </Flex>
</AccentBox>
```

---

# Background Image

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

```tsx
import {
  AccentBox,
  ColumnLayout,
  Heading,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <AccentBox
    backgroundImage="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
    aspectRatio={1}
    color="light-static"
  >
    <Heading>Mit Background Image</Heading>
  </AccentBox>
</ColumnLayout>
```

---

# Kombiniere mit ...

## Link

Die AccentBox kann in einen [Link](/04-components/navigation/link/overview)
gewrappt werden, um die gesamte Component klickbar zu machen.

```tsx
import {
  AccentBox,
  LayoutCard,
  Link,
} from "@mittwald/flow-react-components";

<>
  <Link href="#" target="_blank">
    <AccentBox backgroundColor="blue">
      Verlinkte AccentBox
    </AccentBox>
  </Link>
  <Link href="#" target="_blank">
    <LayoutCard>
      <AccentBox backgroundColor="blue">
        Verlinkte AccentBox in LayoutCard
      </AccentBox>
    </LayoutCard>
  </Link>
</>
```

## LayoutCard

Befindet sich eine AccentBox als erstes Element innerhalb einer
[LayoutCard](/04-components/structure/layout-card/overview), füllt sie die
gesamte Größe der LayoutCard aus.

```tsx
import {
  AccentBox,
  Color,
  Flex,
  Heading,
  LayoutCard,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <AccentBox backgroundColor="gradient" color="dark">
    <Flex align="center" wrap="wrap" gap="m">
      <Flex direction="column" grow>
        <Heading size="l">
          <Color color="violet">mStudio Extension</Color>{" "}
          selber entwickeln
        </Heading>
        <Text>
          <strong>
            Veröffentliche{" "}
            <Color color="violet">eigene Features</Color> im
            mStudio
          </strong>
        </Text>
      </Flex>
      <Link target="_blank" href="#" color="dark">
        Contributor Landingpage
      </Link>
    </Flex>
  </AccentBox>
</LayoutCard>
```