---
name: Heading
route: /Heading
menu: components
---

import { Playground, Props } from 'docz'
import { Heading } from './'
import { Box } from '../Box'

# Heading

<Props of={Heading} />

## Usage

<Playground
  style={{
    backgroundColor: '#F4F6F9',
    margin: '-2em',
    padding: '2em',
    width: 'auto',
  }}
>
  <Box direction='column'>
    <Heading mb='24px' size={1}>
      Heading One
    </Heading>
    <Heading mb='24px' size={2}>
      Heading One
    </Heading>
    <Heading mb='24px' size={3}>
      Heading One
    </Heading>
    <Heading mb='24px' size={4}>
      Heading One
    </Heading>
    <Heading mb='24px' size={5}>
      Heading One
    </Heading>
  </Box>
</Playground>
