Heading Ready

Headings are used as the titles of each major section of a page in the interface. For example, templates generally use headings as their title.

Heading element provides an option to change the level of the heading. Heading also includes an option that allows you to make e.g. h1 visually look like h3, but still keep it h1 in the HTML markup.

Examples #

Open in new window

<duet-heading level="h1" visual-level="h0">Quick brown fox jumps</duet-heading>
<duet-heading level="h1">Quick brown fox jumps</duet-heading>
<duet-heading level="h2">Quick brown fox jumps</duet-heading>
<duet-heading level="h3">Quick brown fox jumps</duet-heading>
<duet-heading level="h4">Quick brown fox jumps</duet-heading>
<duet-heading level="h5">Quick brown fox jumps</duet-heading>
<duet-heading level="h6">Quick brown fox jumps</duet-heading>

Open in new window

<duet-heading level="h1" border>Quick brown fox jumps</duet-heading>
<duet-heading level="h2" border>Quick brown fox jumps</duet-heading>
<duet-heading level="h3" border>Eläinvakuutus vaivattomasti</duet-heading>
<duet-heading level="h4" border>Eläinvakuutus vaivattomasti</duet-heading>
<duet-heading level="h5" border>Eläinvakuutus vaivattomasti</duet-heading>
<duet-heading level="h6" border>Eläinvakuutus vaivattomasti</duet-heading>


<duet-heading level="h1" border="solid">Quick brown fox jumps</duet-heading>
<duet-heading level="h2" border="solid">Quick brown fox jumps</duet-heading>
<duet-heading level="h3" border="solid">Eläinvakuutus vaivattomasti</duet-heading>
<duet-heading level="h4" border="solid">Eläinvakuutus vaivattomasti</duet-heading>
<duet-heading level="h5" border="solid">Eläinvakuutus vaivattomasti</duet-heading>
<duet-heading level="h6" border="solid">Eläinvakuutus vaivattomasti</duet-heading>

Open in new window

<duet-heading level="h1" visual-level="h3">This heading is using h1 level, but looks like h3</duet-heading>
<duet-heading level="h2" visual-level="h3">This heading is using h2 level, but looks like h3</duet-heading>
<duet-heading level="h3" visual-level="h3">This heading is using h3 level, but looks like h3</duet-heading>
<duet-heading level="h4" visual-level="h3">This heading is using h4 level, but looks like h3</duet-heading>
<duet-heading level="h5" visual-level="h3">This heading is using h5 level, but looks like h3</duet-heading>
<duet-heading level="h6" visual-level="h3">This heading is using h6 level, but looks like h3</duet-heading>

Open in new window

<duet-heading level="h1" margin="none">Quick brown fox jumps</duet-heading>
<duet-heading level="h2" margin="none">Quick brown fox jumps</duet-heading>
<duet-heading level="h3" margin="none">Quick brown fox jumps</duet-heading>
<duet-heading level="h4" margin="none">Quick brown fox jumps</duet-heading>
<duet-heading level="h5" margin="none">Quick brown fox jumps</duet-heading>
<duet-heading level="h6" margin="none">Quick brown fox jumps</duet-heading>

Open in new window

<duet-heading level="h1" color="primary">Quick brown fox jumps</duet-heading>
<duet-heading level="h2" color="success">Quick brown fox jumps</duet-heading>
<duet-heading level="h3" color="danger">Quick brown fox jumps</duet-heading>
<duet-heading level="h4" color="gray-darker">Quick brown fox jumps</duet-heading>
<duet-heading level="h5" color="category-family">Quick brown fox jumps</duet-heading>
<duet-heading level="h6" color="category-finance">Quick brown fox jumps</duet-heading>

Open in new window

<duet-heading weight="semibold" level="h2">Quick brown fox jumps</duet-heading>
<duet-heading weight="semibold" level="h3">Quick brown fox jumps</duet-heading>
<duet-heading weight="semibold" level="h4">Quick brown fox jumps</duet-heading>
<duet-heading weight="semibold" level="h5">Quick brown fox jumps</duet-heading>
<duet-heading weight="semibold" level="h6">Quick brown fox jumps</duet-heading>

Open in new window

<duet-card padding="medium" style="max-width: 300px">
  <duet-heading level="h2" visual-level="h3">Kuumailmalentopallolahjakortti 167 S B 3.krs</duet-heading>
  <duet-heading level="h2" visual-level="h3" hyphenate>Kuumailmalentopallolahjakortti 167 S B 3.krs</duet-heading>
</duet-card>

Open in new window

<duet-heading level="h1" visual-level="h0" fixed-size>Quick brown fox jumps</duet-heading>
<duet-heading level="h1" fixed-size>Quick brown fox jumps</duet-heading>
<duet-heading level="h2" fixed-size>Quick brown fox jumps</duet-heading>
<duet-heading level="h3" fixed-size>Quick brown fox jumps</duet-heading>
<duet-heading level="h4" fixed-size>Quick brown fox jumps</duet-heading>
<duet-heading level="h5" fixed-size>Quick brown fox jumps</duet-heading>
<duet-heading level="h6" fixed-size>Quick brown fox jumps</duet-heading>

Properties #

Property	Attribute	Description	Type	Default
`border`	`border`	Enable or disable the border underneath the heading, solid will darken the border	`"solid" \| boolean`	`false`
`color`	`color`	Custom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary".	`string`	`""`
`fixedSize`	`fixed-size`	Disable responsive font scaling.	`boolean`	`false`
`hyphenate`	`hyphenate`	Enable hyphenation for long titles. Useful when there is no control over content e.g. user-generated content.	`boolean`	`false`
`level`	`level`	The actual heading level used in the HTML markup.	`"div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h2"`
`margin`	`margin`	Controls the margin of the component.	`"auto" \| "none"`	`"auto"`
`theme`	`theme`	Theme of the heading.	`"" \| "default" \| "turva"`	`""`
`visualLevel`	`visual-level`	Make the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.	`"h0" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`undefined`
`weight`	`weight`	This property allows you to set normal or semibold font weight for all sizes when needed.	`"auto" \| "normal" \| "semibold"`	`"auto"`

Shadow Parts #

Part	Description
`"duet-heading"`	piercing selector for styling the heading element that should be used only in special circumstances

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

As the title of a section or a sub-section in a page.
To support the hierarchy of the page.

When not to use #

For style alone.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Always nest headings by their level. The most important heading has the level h1, the least important heading level h6.
Skipping heading levels can be confusing for users of assistive technology and should be avoided where possible. Make sure that a <duet-heading level="h2"> is not followed directly by an <duet-heading level="h4">, for example.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.

Heading Ready

Examples #

Properties #

Shadow Parts #

Usage #

When to use #

When not to use #

Accessibility #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting