Page Header - Component

Code

Source (Nunjucks)

<header class="flow all-center">
  <h1>{{ data.title }}</h1>
  {% if data.summary %}
    <p>{{ data.summary }}</p>
  {% endif %}
</header>

Output

<header class="flow all-center">
  <h1>A page header</h1>
  <p>A simple composition of utility classes to make a header group.</p>
</header>

Variants

Code

Source (Nunjucks)

<header class="flow all-center">
  <h1>{{ data.title }}</h1>
  {% if data.summary %}
    <p>{{ data.summary }}</p>
  {% endif %}
</header>

Output

<header class="flow all-center">
  <h1>A page header with no summary</h1>
</header>