Lens design system

Section Header

Section header

Lens pages are constructed from multiple strips of content referred to as ‘strata’.

Each stratum has different styling and functionality dependent on the type of content it contains. A stratum will usually have a section header with a title and summary information.

Core elements

  1. A heading
  2. A summary paragraph
  3. A coloured ‘divider’
<!-- Section header -->
<header class="text-center">
    <div class="row column">
        <div class="section-header">
            <h1 class="section-heading">Section heading</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit tempus, morbi nascetur pellentesque per donec arcu hac cursus risus.</p>
        </div>
        <hr class="section-header-divider" />
    </div>
</header>