V6 Clearleft Patterns

Post Author 

<a class="Post-author" href="#">

    <figure>
        <img src="/v6-assets/img/author-image.png" alt="Alt" />
    </figure>
    <div class="flow--3xs text-grey">
        <h3>Jeremy Keith</h3>
        <h3>Co-Founder</h3>
    </div>

</a>
 
{% set hasLink = url is defined and url is not empty %}
{% set hasSize = size is defined and size is not empty %}

{% if hasLink %}
  <a class="Post-author{{ hasSize ? ' Post-author--' ~ size }}" href="{{ url }}">
{% else %}
  <div class="Post-author{{ hasSize ? ' Post-author--' ~ size }}">
{% endif %}

  {% if image is defined and image.src is defined %}		
    <figure>			
      <img src="{{ image.src }}" alt="{{ image.alt }}" />
    </figure>			
  {% endif %}
  <div class="flow--3xs text-grey">
    <h3>{{ title }}</h3>
    {% if role is defined %}<h3>{{ role }}</h3>{% endif %}
  </div>

{% if hasLink %}
  </a>
{% else %}
  </div>
{% endif %}
 
{
  "title": "Jeremy Keith",
  "role": "Co-Founder",
  "url": "#",
  "image": {
    "src": "/v6-assets/img/author-image.png",
    "alt": "Alt"
  }
}
  • Content: 
    .Post-author {
  display: flex;
  align-items: center;

  h3 {
    font-weight: normal;
    font-size: var(--step--1);
  }

  figure {
    margin-right: var(--space-xs);
    width: var(--space-2xl);
    height: var(--space-2xl);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  &--xs {
    figure {
      margin-right: var(--space-2xs);
      width: var(--space-l);
      height: var(--space-l);
    }
  }

  &--s {
    figure {
      margin-right: var(--space-2xs);
      width: var(--space-xl);
      height: var(--space-xl);
    }
  }

  &--l {
    h3 {
      font-size: var(--step-0);
    }

    figure {
      margin-right: var(--space-s);
      width: var(--space-3xl);
      height: var(--space-3xl);
    }
  }
}
  • URL: /components/raw/post-author/post-author.css
  • Filesystem Path: src/templates/components/post-author/post-author.css
  • Size: 751 Bytes

No notes defined.