Color

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

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

Best Practices

• Setze die Color-Component sparsam und nur in Ausnahmefällen ein.
• Sorge für ausreichenden Kontrast der eingefärbten Schrift zum Hintergrund.
• Hebe nur kurze Abschnitte von ein bis drei Wörtern hervor. So betonst du die Aussage in Texten oder Headings gezielt.

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. Ein häufiger Einsatzort ist 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.

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