Skip to main content

Heading

Heading (module) is identical to heading (component) in terms of font, size, and padding. The only difference is that it is placed in a wrapper to work with modules. Therefore the module level padding applies to the group of (heading + module) and not individually to header as well as the module underneath.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading sizes 1-6 on a default theme

Best practices

Heading module is designed to serve as the title for other modules such as product placement, content placement, etc.

Do

  • Use the appropriate numbered tag for the relative importance of each heading compared to other headings.
  • Keep headings short and succinct.
  • Headings should be descriptive summaries of the content below them.
  • Use the HTML <h1>,<h2>... <h6> elements for headings only.

Don’t

  • Don’t use headings to make text big or bold or to style text.
  • A heading should not be a full sentence or end in a period.
  • Stagger multiple headings in the layout. Be mindful of the baseline and how that lines up with other elements in the layout.

Also known as

Module heading
Module title
Title

Related

Heading
Subheading

Options

  • Hyperlink: adds a hyperlink like "Show all" to the top right of the module
  • Action menu: adds a Action menu under the heading text which can be used to offer ways to let the user narrow down the items visible in the module. The maximum number of Action menus which can be enabled is 4. These will wrap in smaller viewports.
  • Pivot: adds pivot which can be used in conjunction with heading text when there is one level of categorization available within the group. We allow a maximum of 5 pivots inline, after which it converts to a Action menu. Pivots collapse into a Action menu at VP2 & VP1, irrespective of their number.

Development

  • Schema definition: The heading schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Module wrapper for Heading component

Heading 1

<header class="m-heading-1">
    <h1 class="c-heading">Heading 1</h1>
</header>

Module wrapper for Heading component

Heading 2

<header class="m-heading-2">
    <h2 class="c-heading">Heading 2</h2>
</header>

Module wrapper for Heading component

Heading 3

<header class="m-heading-3">
    <h3 class="c-heading">Heading 3</h3>
</header>

Module wrapper for Heading component

Heading 4

<header class="m-heading-4">
    <h4 class="c-heading">Heading 4</h4>
</header>

Module wrapper for Heading component

Heading 5
<header class="m-heading-5">
    <h5 class="c-heading">Heading 5</h5>
</header>

Module wrapper for Heading component

Heading 6
<header class="m-heading-6">
    <h6 class="c-heading">Heading 6</h6>
</header>

Heading module size 4 with hyperlink

Heading 4 with hyperlink Show all

<header class="m-heading-4">
    <h4 class="c-heading">
        <span>Heading 4 with hyperlink</span>
        <a href="#" class="c-hyperlink" aria-label="Show all heading 4">Show all</a>
    </h4>
</header>

Heading module size 4 with heavyweight option

Heading 4 with hyperlink

<header class="m-heading-4 f-heavyweight">
    <h4 class="c-heading">Heading 4 with hyperlink</h4>
</header>

Heading module size 4 with three Pivots

Heading 4 with pivots

Pivot 1 Pivot 2 Pivot 3
<header class="m-heading-4 f-pivot">
    <h4 class="c-heading">Heading 4 with pivots</h4>
    <a href="#" aria-controls="example-pivot-1-target-1" class="f-active">Pivot 1</a>
    <a href="#" aria-controls="example-pivot-1-target-2">Pivot 2</a>
    <a href="#" aria-controls="example-pivot-1-target-3">Pivot 3</a>
</header>

Heading module size 4 with three disabled pivots

Heading 4 with pivots disabled

Pivot 1 Pivot 2 Pivot 3
<header class="m-heading-4 f-pivot f-disabled" data-f-state="disabled">
    <h4 class="c-heading">Heading 4 with pivots disabled</h4>
    <a tabindex="-1" href="#" aria-controls="example-pivot-2-target-1">Pivot 1</a>
    <a tabindex="-1" href="#" aria-controls="example-pivot-2-target-2">Pivot 2</a>
    <a tabindex="-1" href="#" aria-controls="example-pivot-2-target-3">Pivot 3</a>
</header>

Heading module size 4 with three action menus

Heading 4 with action menu

<header class="m-heading-4 f-action">
    <h4 class="c-heading">Heading 4 with action menu</h4>
    <div class="c-action-menu">
        <button class="c-action-trigger" aria-haspopup="true" id="fooBarBaz" aria-expanded="false">Action Menu</button>
        <ul class="c-context-menu" role="menu">
            <li role="menuitem" id="exampleId1" class="f-context-action-trigger">
                <span class="c-glyph glyph-mail">Lorem ipsum 1</span>
            </li>
            <li role="menuitem" id="exampleId2" class="f-context-action-trigger">
                <span class="c-glyph glyph-phone">Lorem ipsum 2</span>
            </li>
            <li role="menuitem" id="exampleId3" class="f-context-action-trigger f-divider">
                <span class="c-glyph glyph-info">Lorem ipsum 3</span>
            </li>
            <li role="menuitem" id="exampleId4" class="f-context-text-only" aria-disabled="true">
                <span>Lorem ipsum 4 (disabled)</span>
            </li>
            <li role="menuitem" id="exampleId5" class="f-context-text-only">
                <span>Lorem ipsum 5</span>
            </li>
        </ul>
    </div>
    <div class="c-action-menu">
        <button class="c-action-trigger" aria-haspopup="true" id="fooBarBaz" aria-expanded="false">Action Menu</button>
        <ul class="c-context-menu" role="menu">
            <li role="menuitem" id="exampleId6" class="f-context-action-trigger">
                <span class="c-glyph glyph-mail">Lorem ipsum 1</span>
            </li>
            <li role="menuitem" id="exampleId7" class="f-context-action-trigger">
                <span class="c-glyph glyph-phone">Lorem ipsum 2</span>
            </li>
            <li role="menuitem" id="exampleId8" class="f-context-action-trigger f-divider">
                <span class="c-glyph glyph-info">Lorem ipsum 3</span>
            </li>
            <li role="menuitem" id="exampleId9" class="f-context-text-only" aria-disabled="true">
                <span>Lorem ipsum 4 (disabled)</span>
            </li>
            <li role="menuitem" id="exampleId10" class="f-context-text-only">
                <span>Lorem ipsum 5</span>
            </li>
        </ul>
    </div>
    <div class="c-action-menu">
        <button class="c-action-trigger" aria-haspopup="true" id="fooBarBaz" aria-expanded="false">Action Menu</button>
        <ul class="c-context-menu" role="menu">
            <li role="menuitem" id="exampleId13" class="f-context-action-trigger">
                <span class="c-glyph glyph-mail">Lorem ipsum 1</span>
            </li>
            <li role="menuitem" id="exampleId14" class="f-context-action-trigger">
                <span class="c-glyph glyph-phone">Lorem ipsum 2</span>
            </li>
            <li role="menuitem" id="exampleId15" class="f-context-action-trigger f-divider">
                <span class="c-glyph glyph-info">Lorem ipsum 3</span>
            </li>
            <li role="menuitem" id="exampleId16" class="f-context-text-only" aria-disabled="true">
                <span>Lorem ipsum 4 (disabled)</span>
            </li>
            <li role="menuitem" id="exampleId17" class="f-context-text-only">
                <span>Lorem ipsum 5</span>
            </li>
        </ul>
    </div>
</header>