Skip to main content

Area heading

An area heading serves as a label for a section of the page that contains a group of modules or a module with a significant amount of content.

Example

Get started with MWF

If you’re new to MWF or just getting started, check out an overview of the framework and workflows.

Best practices

Use area headings to provide clear groupings and breaks in the rhythm of the page. They can be useful when a page has an ambiguous flow, for instance, when a page has an abundance of white space with elements that seem to float in arbitrary containers.

Do

  • Keep the overall content of area headings short and succinct.
  • Area headings should accurately represent the grouped content below them.
  • Use area headings for groups or sections of the page that have a clear grouping or a significant amount of content.

Don’t

  • The heading within area heading should not be a full sentence or end in a period.
  • Be mindful of using many area headings on the page, and avoid using them for sections with minimal content.

Also known as

Group heading
Module title
Section title

Related

Heading
Paragraph
Subheading

Development

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

Code and preview

Heading only

Area heading with heading only

<div data-grid="col-12" class="m-area-heading">
    <h2 class="c-heading">Area heading with heading only</h2>
</div>

Heading with subheading

Area heading with heading and subheading

Lorem ipsum dolor sit amet

<div data-grid="col-12" class="m-area-heading">
    <h2 class="c-heading">Area heading with heading and subheading</h2>
    <h4 class="c-subheading">Lorem ipsum dolor sit amet</h4>
</div>

Heading with paragraph

Area heading with heading and paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div data-grid="col-12" class="m-area-heading">
    <h2 class="c-heading">Area heading with heading and paragraph</h2>
    <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Heading with navigation links

Area heading with heading and links

<div data-grid="col-12" class="m-area-heading" id="headingLinksExample">
    <h2 class="c-heading">Area heading with heading and links</h2>
    <div class="c-group">
        <a href="#" class="c-hyperlink">Hyperlink 1</a>
        <a href="#" class="c-hyperlink">Hyperlink 2</a>
        <a href="#" class="c-hyperlink">Hyperlink 3</a>
        <a href="#" class="c-hyperlink">Hyperlink 4</a>
        <a href="#" class="c-hyperlink">Hyperlink 5</a>
    </div>
</div>