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

import { Playground, PropsTable } from 'docz';
import Heading from './Heading';

# Heading

## Usage

By default, `<Heading />` renders a `<h1 />` with the default margin of `0 0 1rem`.

```javascript
import { Heading } from '@snowpak/powpow';

export default () => (
  <Heading>This is a heading</Heading>;
);
```

## Props

<PropsTable of={Heading} />

## Examples

<Playground>
  <Heading data-cy="sp-heading--h1">Book your dream ski experience now</Heading>
  <Heading as="h2" data-cy="sp-heading--h2">
    Book your dream ski experience now
  </Heading>
  <Heading as="h3" data-cy="sp-heading--h3">
    Book your dream ski experience now
  </Heading>
  <Heading as="h4" data-cy="sp-heading--h4">
    Book your dream ski experience now
  </Heading>
  <Heading as="h5" data-cy="sp-heading--h5">
    Book your dream ski experience now
  </Heading>
  <Heading as="h6" data-cy="sp-heading--h6">
    Book your dream ski experience now
  </Heading>
</Playground>

### Without margin

<Playground>
  <Heading margin="0" data-cy="sp-heading--withoutMargin">
    Book your dream ski experience now
  </Heading>
  <Heading as="h6">
    Lodging, lift tickets, rentals, lessons and transfers
  </Heading>
</Playground>

### Variable weight

<Playground>
  <Heading weight="800" margin="0" data-cy="sp-heading--variableWeight">
    Book your dream ski experience now
  </Heading>
  <Heading weight="300" as="h5">
    Lodging, lift tickets, rentals, lessons and transfers
  </Heading>
</Playground>