Beispiel

import Text from "@mittwald/flow-react-components/Text";

<Text>Das ist ein Text</Text>

Mit emulateBoldWidth

Benutze das emulateBoldWidth Property, wenn dein Text immer die Breite haben soll, die er mit font-weight: bold haben würde. Das ist beispielsweise in horizontalen Navigationen wichtig, wenn der aktive Menüpunkt bold dargestellt wird, um ein springen der Menüpunkte zu vermeiden.

import Text from "@mittwald/flow-react-components/Text";

<Column>
  <Text
    style={{ borderInline: "2px solid red" }}
    emulateBoldWidth
  >
    Das ist ein Text
  </Text>
  <Text style={{ borderInline: "2px solid red" }}>
    <strong>Das ist ein Text</strong>
  </Text>
</Column>

Colors

Dark

import Text from "@mittwald/flow-react-components/Text";

<Text color="dark">Das ist ein Text</Text>

Light

import Text from "@mittwald/flow-react-components/Text";

<Text color="light">Das ist ein Text</Text>