V6 Clearleft Patterns

Team Member Card 

<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">
  {% if url is defined and url is not null %}
  <a href="{{ url }}" class="Team-member-card__link flow focus">
  {% else %}
  <div class="flow">
  {% endif %}
    {% if image is defined and image.src is defined %}
      <img src="{{ image.src }}" alt="{{ image.alt }}" />
    {% endif %}
    <div class="flow--3xs">
      <h2 class="h h-6">
        {{ title }}
      </h2>
      {% if role %}
        <h3 class="eyebrow">
          {{ role }}
        </h3>
      {% endif %}
    </div>
  {% if url is defined and url is not null %}
  </a>
  {% else %}
  </div>
  {% endif %}
</article>
 
{
  "url": "#",
  "title": "Jeremy Keith",
  "role": "Founder",
  "image": {
    "alt": "Jeremy Keith",
    "src": "/v6-assets/img/jeremy-keith-2x.jpg"
  }
}
  • Content: 
    .Team-member-card {
  &__link {
    display: block;
  }

  img {
    width: 100%;
  }

  &:has(> .Team-member-card__link) {
    &:hover .h {
      text-decoration: underline;
    }
  }
}
  • URL: /components/raw/team-member-card/team-member-card.css
  • Filesystem Path: src/templates/components/team-member-card/team-member-card.css
  • Size: 187 Bytes

No notes defined.