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-baseline>
  <hy-heading heading="h6" section="subsection">This is a Heading 2 with subsection divider</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-baseline>
  <hy-heading heading="h6" section="subsection">This is a Heading 2 with subsection divider</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`         |
| `negative` | `negative` |             | `boolean`                                                                                                                         | `false`                          |
| `section`  | `section`  |             | `HeadingSectionVariants.default \| HeadingSectionVariants.subSection`                                                             | `HeadingSectionVariants.default` |

---

Helsinki University Design System