Skip to main content
LocalTapiola Turva

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">Eläinvakuutus vaivattomasti</duet-heading>
Open in new window
<duet-heading level="h2">Eläinvakuutus vaivattomasti</duet-heading>
Open in new window
<duet-heading level="h3">Eläinvakuutus vaivattomasti</duet-heading>
Open in new window
<duet-heading level="h4">Eläinvakuutus vaivattomasti</duet-heading>
Open in new window
<duet-heading level="h5">Eläinvakuutus vaivattomasti</duet-heading>
Open in new window
<duet-heading level="h6">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>

Properties #

PropertyAttributeDescriptionTypeDefault
colorcolorCustom color for the heading as a design token entered in camelCase or kebab-case. Example: "color-primary".string""
levellevelThe actual heading level used in the HTML markup. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".string"h2"
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
themethemeTheme of the heading. Can be one of: "default", "turva".string""
visualLevelvisual-levelMake 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. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".stringundefined

Integration

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