Headline - Component

Code

Source (Nunjucks)

<div class="headline all-center flow">
  <h2 class="headline__title">{{ data.title }}</h2>
  <p>{{ data.summary }}</p>
  {% if data.action %}
    <div class="headline__action">
      <a href="{{ data.action.url }}">{{ data.action.text }}</a>
    </div>
  {% endif %}
</div>

Output

<div class="headline all-center flow">
  <h2 class="headline__title">
    Tempus natoque facilisi habitant ante elementum platea sed
  </h2>
  <p>
    Habitant sodales hendrerit nisl dui conubia est hac nostra interdum ad
    libero mattis mi risus tempor integer sapien velit fames
  </p>
</div>

Information

A simple pattern for create a centered, heading, summary and action group.

Key links

Sass File

Variants

With Action

View full screen

Code

Source (Nunjucks)

<div class="headline all-center flow">
  <h2 class="headline__title">{{ data.title }}</h2>
  <p>{{ data.summary }}</p>
  {% if data.action %}
    <div class="headline__action">
      <a href="{{ data.action.url }}">{{ data.action.text }}</a>
    </div>
  {% endif %}
</div>

Output

<div class="headline all-center flow">
  <h2 class="headline__title">
    Tempus natoque facilisi habitant ante elementum platea sed
  </h2>
  <p>
    Habitant sodales hendrerit nisl dui conubia est hac nostra interdum ad
    libero mattis mi risus tempor integer sapien velit fames
  </p>
  <div class="headline__action">
    <a href="#">See all</a>
  </div>
</div>