# AccentBox

Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.

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

---

# 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](https://flow.mittwald.de/04-components/status/alert).
- Sorge für ausreichenden Kontrast zum Inhalt. Das gilt besonders bei mit der
  [Color](https://flow.mittwald.de/04-components/content/color)-Component eingefärbten Texten; reicht
  der Kontrast nicht, nutze die
  [Light oder Dark Color](https://flow.mittwald.de/02-foundations/01-design/02-colors#light-und-dark-color).

## AccentBox vs. Alert

AccentBoxen und [Alerts](https://flow.mittwald.de/04-components/status/alert) 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.

```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](https://flow.mittwald.de/04-components/navigation/link) 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](https://flow.mittwald.de/04-components/structure/layout-card), 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>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aspectRatio` | `AspectRatio` | - | The aspect ratio of the accent box. |
| `backgroundColor` | `AccentBoxWithCustomBackgroundColor` | `"neutral"` | The background color of the accent box. |
| `backgroundImage` | `string` | - | The background image of the accent box. |
| `children` | `ReactNode` | - | - |
| `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. |
| `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. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |