V6 Clearleft Patterns

Activity 

<div class="grid grid--of-three staggered-layout">
    <article class="flow">
        <span class="eyebrow eyebrow--black">
            Jeremy is currently
        </span>

        <blockquote class="Is-currently flow--2xs">
            <div class="h h-5">Creating a digital-first brand for a brilliant new educational activities platform</div>
            <img src="/v6-assets/img/author-image.png" alt="" loading="lazy" />
        </blockquote>
    </article>
    <article class="flow">
        <span class="eyebrow eyebrow--black">
            Jeremy is currently
        </span>

        <blockquote class="Is-currently flow--2xs">
            <div class="h h-5">Sifting through 150 applications to find our new Business Relationship Manager</div>
            <img src="/v6-assets/img/author-image.png" alt="" loading="lazy" />
        </blockquote>
    </article>
    <article class="flow">
        <span class="eyebrow eyebrow--black">
            Jeremy is currently
        </span>

        <blockquote class="Is-currently flow--2xs">
            <div class="h h-5">Sitting in on design sprint magic with a publishing client, looking comfortable with the process in their second sprint</div>
            <img src="/v6-assets/img/author-image.png" alt="" loading="lazy" />
        </blockquote>
    </article>
</div>

<footer class="staggered-layout__footer">

    <a class="combo-button focus" href="/about/team">
        <span class="">Meet the team</span>
        <div>

            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
            </svg>
        </div>
    </a>
</footer>
 
<div class="grid grid--of-three staggered-layout">
  {% for activity in activities %}
    <article class="flow">
      {% if activity.name %}
        <span class="eyebrow eyebrow--black">
          {{ activity.name }} is currently
        </span>
      {% endif %}

      {% include '@is-currently' with {
        quote: activity.title,
        image: activity.image,
        link: activity.url
      } %}
    </article>
  {% endfor %}
</div>

<footer class="staggered-layout__footer">
  {% include '@combo-button' with {
    text: 'Meet the team',
    link: '/about/team'
  } %}
</footer>
 
{
  "activities": [
    {
      "name": "Jeremy",
      "title": "Creating a digital-first brand for a brilliant new educational activities platform",
      "url": "#",
      "image": {
        "src": "/v6-assets/img/author-image.png",
        "alt": ""
      }
    },
    {
      "name": "Jeremy",
      "title": "Sifting through 150 applications to find our new Business Relationship Manager",
      "url": "#",
      "image": {
        "src": "/v6-assets/img/author-image.png",
        "alt": ""
      }
    },
    {
      "name": "Jeremy",
      "title": "Sitting in on design sprint magic with a publishing client, looking comfortable with the process in their second sprint",
      "url": "#",
      "image": {
        "src": "/v6-assets/img/author-image.png",
        "alt": ""
      }
    }
  ]
}

No notes defined.