<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.