Get help Color blind mode Low vision mode

Page Heading Ready

Page heading is a wrapper for Heading component to create a brand themed intro for a page.

Examples #

Open in new window 
<duet-page-heading layout="narrow" icon="category-car">
  <duet-heading slot="heading" level="h1" margin="none">Lorem ipsum dolor sit</duet-heading>
</duet-page-heading>
<duet-layout center margin="none">
  <div slot="main">
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
    <duet-heading level="h4">Heading H4</duet-heading>
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
  </div>
</duet-layout>
Open in new window 
<duet-page-heading layout="fluid" icon="category-car">
  <duet-heading slot="heading" level="h1" margin="none">Lorem ipsum dolor sit</duet-heading>
</duet-page-heading>
<duet-layout margin="none">
  <div slot="main">
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
    <duet-heading level="h4">Heading H4</duet-heading>
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
  </div>
</duet-layout>

Properties #

Property Attribute Description Type Default
icon icon Icon. string ""
layout layout Layout. "fluid" | "narrow" "narrow"
theme theme Theme of the hero area. "" | "default" | "turva" ""

Slots #

Slot Description
"heading" This is a slot for heading content.

Usage #

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

When to use #

  • To start a page with a brand looking heading.

When not to use #

  • When you need don't need the extra brand imaginery.

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.

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

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

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