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

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

# Heading

<Props of={Heading} />

## Usage

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