---
name: Heading
menu: Patterns
parent: Modules
route: /patterns/heading
---

# Heading

## Basic Heading

Heading wraps an h1 element, it should be used for section title.

## Default Heading

The default heading is an H1 element with size Mouse

```specimen-react
<Heading>
  H1 Mouse
</Heading>
```

### Sizes and Hierarchy

You may override the font size by specifying `size`.

You may also want to override the default heading level (h1) by specifying `level`. This is particularly important for accessibility purposes.

```specimen-react
<Heading size="snail" level="h3">
  Snail
</Heading>
```

```specimen-react
<Heading size="mouse">
  Mouse
</Heading>
```

```specimen-react
<Heading size="otter">
  Otter
</Heading>
```

```specimen-react
<Heading size="mammoth">
  Mammoth
</Heading>
```

```specimen-react
<Heading level="h4">
  H4 should be dolphin
</Heading>
```

### Custom Font Weight and Text Alignment

Depending on the font-face, sometimes the size and weight don't linearly correlate in the sizing hierarchy (snail, mouse, otter, etc.).

You may use the `fontWeight` property to override with a custom font weight. All values from the [CSS property `font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) are available.

```specimen-react
<Heading fontWeight={700} size="dolphin">
  Dolphin but bold
</Heading>
```

The heading text can also be centered using the `textAlign` prop:

```specimen-react
<Heading textAlign="center" size="dolphin">
  Dolphin and centered
</Heading>
```

### Capping Font Size on mobile

Sometimes Whale and Mammoth fonts are too big for mobile, for that reason there is the `capMobileSize` prop, it caps font size to Hippo on mobile
