Color

Grundlagen

Best Practices

Achte bei der Verwendung der Color-Component darauf, dass ...

• sie sparsam und nur in Ausnahmefällen eingesetzt wird.
• die eingefärbte Schrift stets einen ausreichenden Kontrast zum Hintergrund aufweist.
• nur kurze Abschnitte (1-3 Wörter) in Texten oder Headings hervorgehoben werden. Die markierten Wörter sollten den Inhalt bzw. die Aussage gezielt betonen.

Verwendung

Verwende die Color-Component, um ...

• besondere Wörter in Heading innerhalb von Werbe-AccentBoxen farblich hervorzuheben.
• einzelne Begriffe in Headings oder Texten auf Landing-Pages gezielt zu betonen.
• Icons für Trendindikatoren auf Dashboards einzufärben.

Playground

Um ein Element einzufärben, wird es mit <Color /> umschlossen. Die gewünschte Farbe wird über die color-Property vergeben.

import {
  Color,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  <strong>
    Veröffentliche{" "}
    <Color color="violet">eigene Features</Color> im mStudio
  </strong>
</Text>

Color

Je nach Anwendungsfall stehen Colors aus den Bereichen Brand, Status oder Custom zur Verfügung. Je nach Hintergrund muss auf ein ausreichendes Kontrastverhältnis geachtet werden. Außerdem sollten Farben nicht allein eine Bedeutung übertragen.

Brand Colors

Brand Colors eignen sich, um einzelne Passagen in Texten oder Headings hervorzuheben. Das ist vor allem bei werblichen Hinweisen hilfreich.

Status Colors

Status Colors unterstützen die visuelle Einordnung eines Zustands. Häufige Einsatzorte sind Icons für Indikatoren auf dem Dashboard oder die Darstellung negativer Beträge.

Custom Colors

Für beliebige Colors unterstützt die color-Property die Angabe eines HEX-Werts.

Kombiniere mit ...

Text

Teile eines Textes lassen sich mithilfe der Color-Component einfärben.

Heading

Mit der Color-Component lassen sich in Headings gezielt wichtige Wörter farblich hervorheben.

Icon

Mit der Color-Component lassen sich gezielt einzelne Icons farblich hervorheben.

AccentBox

Ein häufiges Einsatzgebiet der Color-Component ist die Hervorhebung von Headings in AccentBoxen mit Werbeinhalten. Dabei ist besonders wichtig, dass die eingefärbte Schrift einen ausreichenden Kontrast zum Hintergrund aufweist.

Properties