# AccentBox

Die AccentBox dient dazu, besondere Inhalte dekorativ hervorzuheben.

## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung einer AccentBox darauf, dass...

- sie sparsam eingesetzt wird, um gezielt Aufmerksamkeit zu lenken.
- keine kritischen Inhalte darin platziert werden. Wenn Informationen zwingend
  wahrgenommen werden müssen, verwende stattdessen einen
  [Alert](/04-components/status/alert/overview).
- ein ausreichender Kontrast zum Inhalt besteht – insbesondere, wenn Texte
  mithilfe der [Color](/04-components/content/color/overview)-Component
  eingefärbt werden.

## Verwendung

Verwende eine AccentBox, um...

- besondere Inhalte visuell hervorzuheben.
- ergänzenden Inhalt darzustellen, der nicht zwingend wahrgenommen werden muss.
- Umfragen aufmerksamkeitsstark zu präsentieren.
- Werbemaßnahmen ansprechend zu platzieren.
- kontextbezogene Hinweise oder Tipps zu geben.

## AccentBox vs. Alert

AccentBoxen und [Alerts](/04-components/status/alert/overview) 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.

  

- ergänzende, aber nicht kritische Hinweise anzuzeigen.
    - kontextuelle Informationen oder Tipps zu geben.
    - visuell strukturierende Inhalte einzubetten, ohne zu unterbrechen.

  

- den User auf sicherheits- oder funktionsrelevante Informationen hinzuweisen.
    - vor möglichen Problemen oder Systemzuständen zu warnen.
    - dringende oder aktionsrelevante Statusmeldungen zu kommunizieren.