V6 Clearleft Patterns

Team Contact: With Image 

<div class="Team-contact">
    <figure>
        <img src="/v6-assets/img/author-image.png" alt="Alt" loading="lazy" />
    </figure>
    <div class="flow--3xs">
        <a href="mailto:#" class="Twi Twi--link text-blue focus" style="">
            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
            </svg>
            <span>Email Jeremy Keith about stuff and things</span></a>
        <p class="small">
            Jeremy Keith, Co-Founder
        </p>
    </div>
</div>
 
<div class="Team-contact">
  {% if image is defined and image.src is defined %}
    <figure>
      <img src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy" />
    </figure>
  {% endif %}
  <div class="flow--3xs">
    {% include '@twi' with {
      text: title,
      link: 'mailto:' ~ email,
      icon: 'arrow-right'
    } %}
    {% if role %}
      <p class="small">
        {{ name }}, {{ role }}
      </p>
    {% endif %}
  </div>
</div>
 
{
  "title": "Email Jeremy Keith about stuff and things",
  "name": "Jeremy Keith",
  "role": "Co-Founder",
  "email": "#",
  "image": {
    "src": "/v6-assets/img/author-image.png",
    "alt": "Alt"
  }
}
  • Content: 
    .Team-contact {
  display: flex;
  align-items: center;

  figure {
    margin-right: var(--space-s);
    width: 80px;
    height: 80px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
  • URL: /components/raw/team-contact/team-contact.css
  • Filesystem Path: src/templates/components/team-contact/team-contact.css
  • Size: 216 Bytes

No notes defined.