### Usage
```jsx
<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>
<Heading level={5}>Heading 5</Heading>
<Heading level={6}>Heading 6</Heading>
```

### Setting Level Manually

Ocassionally, a design will have a heading level that doesn't match the semantic level of the heading. In this case, use the `as` prop.

```jsx
<Heading level={2} as="h3">Heading 3 that look like Heading 2</Heading>
```
