typography

Text

Dynamic and responsive typography with control

Features

Dynamic HTML tag
Fully customizable
Responsive text
Themes ready

Links

Open in playground Open in Storybook View source

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 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.