Skip to main content

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>
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>

Properties #

Property Attribute Description Type Default
border border Enable or disable the border underneath the heading. boolean false
color color Custom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary". string ""
level level The actual heading level used in the HTML markup. "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 semibold font weight for all sizes when needed. "auto" | "semibold" "auto"

Dependencies #

Used by #

Graph #

graph TD;
duet-hero --> duet-heading
duet-modal --> duet-heading
duet-step --> duet-heading
style duet-heading fill:#f9f,stroke:#333,stroke-width:4px

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.



Tutorials

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

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

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