readme.md

---
title: Heading
sidebar: true
---

# Heading

Heading element is used for different heading sizes. Heading type can be defined by giving the component heading attribute.

## Usage

### Basic usage
Provide heading attribute for the component to choose what type of heading to use.

<hy-docs-container>
  <hy-heading heading="h2">This uses h2</hy-heading>
</hy-docs-container>

```
<hy-heading heading="h2">This uses h2</hy-heading>
```

### Default heading

<hy-docs-container>
  <hy-heading>Defaults to h1</hy-heading>
</hy-docs-container>

```
<hy-heading>Defaults to h1</hy-heading>
```

### different varians from h1 to h6

<hy-docs-container>
<hy-baseline>
  <hy-heading heading="h1">This is a Heading 1</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h2">This is a Heading 2</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h3">This is a Heading 3</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h4">This is a Heading 4</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h5">This is a Heading 5</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h6">This is a Heading 6</hy-heading>
</hy-baseline>
</hy-docs-container>

```
<hy-docs-container>
<hy-baseline>
  <hy-heading heading="h1">This is a Heading 1</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h2">This is a Heading 2</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h3">This is a Heading 3</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h4">This is a Heading 4</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h5">This is a Heading 5</hy-heading>
</hy-baseline>
<hy-baseline>
  <hy-heading heading="h6">This is a Heading 6</hy-heading>
</hy-baseline>
</hy-docs-container>
```


<!-- Auto Generated Below -->


## Properties

| Property  | Attribute | Description | Type                                                                                                                              | Default                  |
| --------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| `heading` | `heading` |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default` |


----------------------------------------------

HY component demo