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.

This uses h2

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

Default heading

Defaults to h1

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

different varians from h1 to h6

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

<hy-docs-container>
<hy-baseline>
<hy-heading heading="h1">This is a Heading 1</hy-heading>

<hy-heading heading="h2">This is a Heading 2</hy-heading>

<hy-heading heading="h3">This is a Heading 3</hy-heading>

<hy-heading heading="h4">This is a Heading 4</hy-heading>

<hy-heading heading="h5">This is a Heading 5</hy-heading>

<hy-heading heading="h6">This is a Heading 6</hy-heading>
</hy-baseline>
</hy-docs-container>

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