Typography

The Typoraphy component is a wrapper component that will apply typography styles to the text inside.
If none of these components is what you need there is also the option of using theText component for rendering a customized text. This component accepts fontStyle for loading an established style from the Design System or as the last resource you can also manually choose the font size, family and weight.

Examples

Heading

<Grid gridGap={2}>
  <H1>H1 - First level title</H1>
  <H2>H2- Second level title</H2>
  <H3>H3 - Third level title</H3>
  <H4>H4- Fourth level title</H4>
  <H5>H5 - Fifth level title</H5>
  <H6>H6 - Sixth level title</H6>
</Grid>

Body

<Grid gridGap={2} gridRowGap={4} gridTemplateColumns='1fr 1fr' alignItems="center">
  <Text fontStyle="p1">P1</Text>
  <Text fontStyle="p1" color="secondary">P1</Text>
  <Text fontStyle="p2">P2</Text>
  <Text fontStyle="p2" color="secondary">P2</Text>
  <Text fontStyle="p3">P3</Text>
  <Text fontStyle="p3" color="secondary">P3</Text>
  <Text fontStyle="p4">P4</Text>
  <Text fontStyle="p4" color="secondary">P4</Text>
</Grid>

Custom

<Grid gridGap={2} width={1}>
  <Text fontStyle="h3" as="h1">This is a h3 style using a h1 tag</Text>
  <Text fontStyle="h4" as="span">We recommend using the "fontStyle" as much as possible.</Text>
  <Text font="heading" size="xs" as="div" textAlign="center" style={{background: "grey", color: "white", padding: '10px'}}>You are still able to customize the Text if none of those options covers what you need.</Text>
</Grid>

Error Text (Text.Error)

<Grid gridGap={2}>
  <Text.Error>There has been an error loading your data.</Text.Error>
</Grid>