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

`jsx live <> <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.

```jsx live
<>
  <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

`jsx live <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`

```jsx live
<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.

`jsx live <> <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`

```jsx live
<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.

`jsx live <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.

```jsx live
<>
  <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

jsx live <> <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> </>

Package detail

@elemental-ui-alpha/typography

readme