Typography

import { Anchor, Heading, HorizontalRule, Text } from '@elemental/typography';

Common Props

Margins

The Text and Heading components accept margin properties:

• margin all around
• marginTop top
• marginRight right
• marginBottom bottom
• marginLeft left
• marginX both left and right
• marginY both top and bottom

<>
  <Heading level="4" marginTop="small">
    Small margin on top
  </Heading>
  <Text marginY="large">Large margin on both top and bottom</Text>
</>

"As" element

To promote semantic HTML the Text and Heading components accept an as property, which will replace the default element that is rendered.

<>
  <Heading level="4" as="h2">
    The h2 styles on an h3 element.
  </Heading>
  <Text as="label">Text styles on a label element.</Text>
</>

Leading

Tighten or loosen the leading of your content. This translates to line-height in CSS.

• looser
• loose
• regular (default)
• tight
• tighter

<Stack gap="large">
  <Heading level="4" leading="loose">
    Wafer dessert topping halvah chupa chups pudding sweet cupcake candy.
    Caramels tootsie roll muffin chupa chups macaroon gingerbread carrot cake
    oat cake.
  </Heading>
  <Text leading="regular">
    Wafer dessert topping halvah chupa chups pudding sweet cupcake candy.
    Caramels tootsie roll muffin chupa chups macaroon gingerbread carrot cake
    oat cake.
  </Text>
  <Text leading="tight">
    Wafer dessert topping halvah chupa chups pudding sweet cupcake candy.
    Caramels tootsie roll muffin chupa chups macaroon gingerbread carrot cake
    oat cake.
  </Text>
</Stack>

Tracking

Tighten or loosen the tracking of your content. This translates to letter-spacing in CSS.

• looser
• loose
• regular (default)
• tight
• tighter

<Stack gap="large">
  <Heading level="4" tracking="loose">
    Wafer dessert topping halvah chupa chups pudding sweet cupcake candy.
    Caramels tootsie roll muffin chupa chups macaroon gingerbread carrot cake
    oat cake.
  </Heading>
  <Text tracking="regular">
    Wafer dessert topping halvah chupa chups pudding sweet cupcake candy.
    Caramels tootsie roll muffin chupa chups macaroon gingerbread carrot cake
    oat cake.
  </Text>
  <Text tracking="tighter">
    Wafer dessert topping halvah chupa chups pudding sweet cupcake candy.
    Caramels tootsie roll muffin chupa chups macaroon gingerbread carrot cake
    oat cake.
  </Text>
</Stack>

Heading

Use the Heading component for dynamic levels, 1-6 available.

<>
  <Heading level="1">Heading level 1</Heading>
  <Heading level="2">Heading level 2</Heading>
  <Heading level="3">Heading level 3</Heading>
  <Heading level="4">Heading level 4</Heading>
  <Heading level="5">Heading level 5</Heading>
  <Heading level="6">Heading level 6</Heading>
</>

Text

Influence text styles within the constraints of the theme.

Size

Apply various font sizes:

• xsmall
• small
• medium (default)
• large
• xlarge

<Stack gap="small">
  <Text size="xsmall">Cupcake bonbon pudding pie toffee.</Text>
  <Text size="small">
    Chocolate bar chocolate cake apple pie lemon drops. Halvah candy jelly-o pie
    donut powder marzipan.
  </Text>
  <Text size="medium">
    Liquorice lemon drops topping pie sesame snaps bonbon jujubes lemon drops.
  </Text>
  <Text size="large">
    Cake cotton candy jujubes tiramisu soufflé toffee bear claw.
  </Text>
  <Text size="xlarge">Candy canes sweet roll jujubes macaroon.</Text>
</Stack>

Foreground

Apply an alternative foreground colour.

<Stack gap="small">
  <Text foreground="text">The default foreground color.</Text>
  <Text foreground="muted">Muted for slightly less important content.</Text>
  <Text foreground="dim">Dim down this content for a dull appearance.</Text>
  <Text foreground="critical">Oh no, something's gone wrong!</Text>
  <Text foreground="positive">Something good, probably.</Text>
  <Text foreground="info">Some informative text.</Text>
</Stack>

Miscellaneous

Horizontal Rule

Add a divider to your content.

<>
  <Text>Cheesecake candy halvah pie carrot cake tiramisu gummi bears.</Text>
  <HorizontalRule marginY="small" />
  <Text>Topping apple pie donut gummies chocolate bar pudding pie wafer.</Text>
</>

Anchor

Use Anchor for inline link text. Available in two variants:

• normal (default)
• subtle

<>
  <Text>
    Jelly beans topping <Anchor href="#">cupcake</Anchor> danish donut.
  </Text>
  <Text>
    Muffin{' '}
    <Anchor variant="subtle" href="#">
      toffee tart
    </Anchor>{' '}
    chocolate cake.
  </Text>
  <Text>
    External links are emphasised with a{' '}
    <Anchor external href="#">
      disclosure icon
    </Anchor>
  </Text>
</>