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                                 |
| ------------- | ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `headerstyle` | `headerstyle` |             | `string`                                                                                                                                                                                             | `'common'`                              |
| `heading`     | `heading`     |             | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6`                                                                    | `HeadingVarians.default as any`         |
| `isSearch`    | `is-search`   |             | `boolean`                                                                                                                                                                                            | `false`                                 |
| `negative`    | `negative`    |             | `boolean`                                                                                                                                                                                            | `false`                                 |
| `section`     | `section`     |             | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |

## Dependencies

### Used by

- [hy-footer-info](../footer/hy-footer-info)
- [hy-footer-link-item](../footer/hy-footer-link-item)
- [hy-hero](../hy-hero)
- [hy-introduction](../hy-introduction)
- [hy-large-process-flow](../hy-large-process-flow)
- [hy-shortcuts](../hy-shortcuts)
- [hy-video](../hy-video)

### Depends on

- [hy-box](../hy-box)

### Graph

```mermaid
graph TD;
  hy-heading --> hy-box
  hy-footer-info --> hy-heading
  hy-footer-link-item --> hy-heading
  hy-hero --> hy-heading
  hy-introduction --> hy-heading
  hy-large-process-flow --> hy-heading
  hy-shortcuts --> hy-heading
  hy-video --> hy-heading
  style hy-heading fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System