v14.0.8


typography

Text

Dynamic and responsive typography with control

Features

  • Dynamic HTML tag
  • Fully customizable
  • Responsive text
  • Themes ready

Lorem ipsum dolor sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Lorem ipsum, amet consectetur adipisicing elit.


Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius dolores, tempore quas labore officiis praesentium. Porro sed dolorem, numquam temporibus.

Anatomy

import { Text } from "@wonderflow/react-components";

export default () => (
  <>
<Text>
<Text as="span" variant="subtitle-2" color="danger">Lorem ipsum</Text>
<Text as="span" variant="subtitle-2" color="informative">dolor sit</Text>
</Text>
<Text as="h1" variant="heading-1">...</Text>
<Text as="h3" variant="subtitle-1">...</Text>
<Text variant="body-1">...</Text>
</> );

tsx

Decorators

Decorators can be placed before or after a string. They must be a Symbol or a Chip component. Dimension will resize automatically depending on the decoratorSize property and the selected text variant, with a restriction to the body one.

Lorem ipsumsmall
Lorem ipsumsmall
Lorem ipsumbig
import { Symbol, Text, Chip } from "@wonderflow/react-components";

export default () => (
  <>
<Text
variant="body-3"
decoratorSize="small"
decoratorStart={<Symbol source="circle-check" weight="solid"/>}
decoratorEnd={<Chip color="red">small</Chip>}
>Lorem ipsum</Text>
<Text
variant="body-2"
color="informative"
decoratorSize="small"
decoratorStart={<Symbol source="circle-check" weight="solid"/>}
decoratorEnd={<Chip color="blue">small</Chip>}
>Lorem ipsum</Text>
<Text
variant="body-1"
decoratorSize="big"
decoratorStart={<Symbol source="circle-check" weight="duotone" color="red"/>}
decoratorEnd={<Chip color="green" icon="star">big</Chip>}
>Lorem ipsum</Text>
</> );

tsx

API Reference

PROPERTY
TYPE
DEFAULT
variant
enum
body-1
color
enum
textAlign
enum
start
maxWidth
string
truncate
boolean
false
preventResponsive
boolean
false
preventBreakWord
boolean
false
decoratorStart
React.ReactElement<SymbolProps> | React.ReactElement<ChipProps>
decoratorEnd
React.ReactElement<SymbolProps> | React.ReactElement<ChipProps>
decoratorSize
enum
small
anchor
boolean
false
as
enum
p

Accessibility

Read more about how to manage headings and accessibility.


Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024