Gonk Design: Pattern Library

View the website ←

Inspo

{{ design.patterns.renderPattern('inspo', {}) | safe }}

Source (Nunjucks)

<div class="inspo region indent">
  <div class="corner" data-corner-docked data-corner-theme="primary"></div>
  <div class="wrapper">
    <h2 class="visually-hidden">{{ data.heading }}</h2>
    <div class="inspo__grid">
      {% for line in data.displayHeading %}
        <p class="inspo__heading" aria-hidden="true">{{ line }}</p>
      {% endfor %}
      <div class="inspo__img">
          <picture>
            <source srcset="{{ data.img.src }}.webp" type="image/webp">
            <img src="{{ data.img.src }}.jpg" alt="{{ data.img.alt }}" loading="lazy" draggable="false"/>
          </picture>
        {# <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" loading="lazy"/> #}
      </div>
    </div>
  </div>
  <div class="inspo__stripe indent"></div>
</div>

Information

Some really important factors about this pattern are the following:

  1. The heading is visually hidden
  2. This heading should be broken on to two lines, which are in turn, distributed by CSS grid
  3. Try to keep the heading short and snappy
  4. Make sure the image fits nicely in a 16/9 aspect ratio

Gonk Design: Pattern Library

View the website ←