Website pattern library

Page content

Content sections

Create logical heading structures by grouping page content into short sections.

Heading 3s as sections example:

Heading 2

Heading 3 (Section 1)

Content

Heading 4 - Sub of heading h3

Content

Heading 3 (Section 2)

Content

Heading 4 - Sub of heading h3

Content

Heading 2s as sections example:

Heading 2 (Section 1)

Heading 3 - Sub of heading h2

Content

Heading 4 - Sub of heading h3

Content

Heading 2 (Section 2)

Heading 3 - Sub of heading h2

Content

Heading 4 - Sub of heading h3

Content

Multiple nested heading sections:

Heading 2

Heading 3 (Sub Section)

Content

Heading 4 - (Sub Sub Section)

Content

Heading 4 - (Sub Sub Section)

Content

Heading 3 (Sub Section)

Content

Heading 4 - (Sub Sub Section)

Content

Heading 4 - (Sub Sub Section)

Content

Reference: WPL004   
Copy this page link to your clipboard

Usage

  • Tick check iconIn the Drupal content area
  • Tick check iconIn the Mendix content area
  • Tick check iconOnly use multiple h2s if the page content is clearly divided into two or three sections
  • Tick check iconUse h3s as sub sections
  • Tick check iconNest multiple h4s under h3s

Components

Only use multiple h2s when the content can clearly be divided

  • h2 heading
  • Paragraph
  • Check list

Up arrow iconBack to top