Color

Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben, um sie sichtbar vom übrigen Designsystem abzuheben.GitHubMarkdown
Veröffentliche eigene Features im mStudio

Playground

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

Veröffentliche eigene Features im mStudio
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.

bluevioletlilacteal

Status Colors

Status Colors unterstützen die visuelle Einordnung eines Zustands. Ein häufiger Einsatzort ist die Darstellung negativer Beträge.

dangerwarninginfosuccessunavialable

Custom Colors

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

custom

Kombiniere mit ...

Text

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

Veröffentliche eigene Features im mStudio

Heading

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

mStudio Extension selber entwickeln

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.

mStudio Extension selber entwickeln

Veröffentliche eigene Features im mStudio
Contributor Landingpage

Auf dieser Seite