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>
Defaults to h1 Default heading
<hy-heading>Defaults to h1</hy-heading>
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 This is a Heading 2 with subsection divider 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>
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