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

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

# Heading

## Import
`import { Heading } from '@blasterjs/core'`

## Basic Usage

The `<Heading>` component renders an `<h1>` with basic styles by default.

<Playground>
  <Heading>Heading 1</Heading>
</Playground>

## Changing heading tag

Use the `as` prop to change from the default `h1` element to `h2`, `h3`, `h4`, `h5`, or `h6`.

<Playground>
  <Heading as="h1">Heading 1</Heading>
  <Heading as="h2">Heading 2</Heading>
  <Heading as="h3">Heading 3</Heading>
  <Heading as="h4">Heading 4</Heading>
  <Heading as="h5">Heading 5</Heading>
  <Heading as="h6">Heading 6</Heading>
</Playground>

## Styling headings

<Playground>
  <Heading color="primary" lineHeight="1" fontWeight="100">Heading 1</Heading>
  <Heading textAlign="center">Center aligned heading</Heading>
</Playground>

### PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| as | string | no | `h1` | `[h1, h2, h3, h4, h5, h6]` |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  space: {
    mt
  },
  colors: {
    color
  },
  fonts: {
    fontFamily
  },
  fontSizes: {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
  },
  fontWeights: {
    fontWeight
  },
  lineHeights: {
    lineHeight
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/heading)
- [Learn more about themeing](/blaster-theme)