Section header with call to action

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. The section header can also include a related call to action.

Core elements

  1. A heading
  2. A summary paragraph
  3. A section-specific call to action (Optional)
<!-- Section header with call to action -->
<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>
    </div>
</header>
<footer class="text-center">
    <div class="row column">
        <!-- COMPONENT: Standard button -->
        <a href="#" class="button">Lorem ipsum dolor sit</a>
        <!-- End component: Standard button -->
    </div>
</footer>
  • Handle: @section-header-with-call-to-action
  • Preview:
  • Filesystem Path: components/recipes/section-headers/section-header-with-call-to-action/section-header-with-call-to-action.hbs
  • References (1): @button-standard
  • Referenced by (1): @pinboard