V6 Clearleft Patterns

Team Listing 

<div class="flow--gutter">
    <h3 class="eyebrow eyebrow--black">
        Jeremy works with
    </h3>
    <div class="grid grid--of-two-four grid--v-gap-l">
        <article class="Team-member-card">
            <a href="#" class="Team-member-card__link flow focus">
                <img src="/v6-assets/img/jeremy-keith-2x.jpg" alt="Jeremy Keith" />
                <div class="flow--3xs">
                    <h2 class="h h-6">
                        Jeremy Keith
                    </h2>
                    <h3 class="eyebrow">
                        Founder
                    </h3>
                </div>
            </a>
        </article>
        <article class="Team-member-card">
            <a href="#" class="Team-member-card__link flow focus">
                <div class="flow--3xs">
                    <h2 class="h h-6">
                        Jeremy Keith
                    </h2>
                    <h3 class="eyebrow">
                        Founder
                    </h3>
                </div>
            </a>
        </article>
        <article class="Team-member-card">
            <a href="#" class="Team-member-card__link flow focus">
                <img src="/v6-assets/img/jeremy-keith-2x.jpg" alt="Jeremy Keith" />
                <div class="flow--3xs">
                    <h2 class="h h-6">
                        Jeremy Keith
                    </h2>
                    <h3 class="eyebrow">
                        Founder
                    </h3>
                </div>
            </a>
        </article>
        <article class="Team-member-card">
            <a href="#" class="Team-member-card__link flow focus">
                <img src="/v6-assets/img/jeremy-keith-2x.jpg" alt="Jeremy Keith" />
                <div class="flow--3xs">
                    <h2 class="h h-6">
                        Jeremy Keith
                    </h2>
                    <h3 class="eyebrow">
                        Founder
                    </h3>
                </div>
            </a>
        </article>
    </div>
</div>
 
<div class="flow--gutter">
  {% if eyebrow is defined and eyebrow %}
    <h3 class="eyebrow eyebrow--black">
      {{ eyebrow }}
    </h3>
  {% endif %}
  <div class="grid grid--of-two-four grid--v-gap-l">
    {% for teamMember in team %}
      {% include '@team-member-card' with teamMember %}
    {% endfor %}
  </div>
</div>
 
{
  "eyebrow": "Jeremy works with",
  "team": [
    {
      "url": "#",
      "title": "Jeremy Keith",
      "role": "Founder",
      "image": {
        "alt": "Jeremy Keith",
        "src": "/v6-assets/img/jeremy-keith-2x.jpg"
      }
    },
    {
      "url": "#",
      "title": "Jeremy Keith",
      "role": "Founder"
    },
    {
      "url": "#",
      "title": "Jeremy Keith",
      "role": "Founder",
      "image": {
        "alt": "Jeremy Keith",
        "src": "/v6-assets/img/jeremy-keith-2x.jpg"
      }
    },
    {
      "url": "#",
      "title": "Jeremy Keith",
      "role": "Founder",
      "image": {
        "alt": "Jeremy Keith",
        "src": "/v6-assets/img/jeremy-keith-2x.jpg"
      }
    }
  ]
}

No notes defined.