Eyebrow - Component

An eyebrow is a useful tool for introducing content, such as headings.

Code

Source (Nunjucks)

<div class="flow">
  <p class="eyebrow">{{ data.content }}</p>
  {% if data.heading %}
    <h2>{{ data.heading }}</h2>
  {% endif %}
</div>

Output

<div class="flow">
  <p class="eyebrow">An eyebrow element</p>
</div>

Variants

Code

Source (Nunjucks)

<div class="flow">
  <p class="eyebrow">{{ data.content }}</p>
  {% if data.heading %}
    <h2>{{ data.heading }}</h2>
  {% endif %}
</div>

Output

<div class="flow">
  <p class="eyebrow">An eyebrow</p>
  <h2>A heading element</h2>
</div>