mittwald Flow Logo

Components

Color

Mit der Color-Component lassen sich Texte, Headings oder Icons gezielt einfärben, um sie sichtbar vom übrigen Designsystem abzuheben.GitHub
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>
  <b>
    Veröffentliche{" "}
    <Color color="violet">eigene Features</Color> im mStudio
  </b>
</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. Häufige Einsatzorte sind Icons für Indikatoren auf dem Dashboard oder die Darstellung negativer Beträge.

dangerwarninginfosuccess

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

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.

mStudio Extension selber entwickeln

Veröffentliche eigene Features im mStudio
Contributor Landingpage

Overview