Authors - Component

Code

Source (Nunjucks)

<div class="author">
  <a class="avatar" href="{{ data.url }}">
    <img
      alt="{{ data.name }}"
      height="64"
      src="https://web-dev.imgix.net/{{
        data.image
      }}?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
      width="64"
      loading="lazy"
      decoding="async"
      sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
      srcset="
        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
        https://web-dev.imgix.net/{{ data.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
      "
    />
  </a>
  <div class="flow">
    <cite class="author__name">
      <a href="{{ data.url }}">{{ data.name }}</a>
    </cite>
    {% if data.bio %}
      <p class="author__bio">{{ data.bio }}</p>
    {% endif %}
    <ul class="author__links cluster" role="list">
      {% for link in data.links %}
      <li>
        <a href="{{ link.url }}">{{ link.text }}</a>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>

Output

<div class="author">
  <a class="avatar" href="#">
    <img
      alt="Collin Dion Agata"
      height="64"
      src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
      width="64"
      loading="lazy"
      decoding="async"
      sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
      srcset="
        https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
        https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
        https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
        https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
        https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
      "
    />
  </a>
  <div class="flow">
    <cite class="author__name">
      <a href="#">Collin Dion Agata</a>
    </cite>
    <p class="author__bio">
      Massa gravida tempus placerat sapien venenatis conubia odio donec montes
      nisl feugiat.
    </p>
    <ul class="author__links cluster" role="list">
      <li>
        <a href="https://twitter.com/CollinDion">Twitter</a>
      </li>
      <li>
        <a href="#">Another link</a>
      </li>
      <li>
        <a href="#">Last link that's longer</a>
      </li>
    </ul>
  </div>
</div>

Information

The authors pattern supports one or many authors that have one of many links associated with them. To render multiple authors in a group, use the cluster layout composition.

Implementations

11ty Shortcode

An implementation of this design exists as an 11ty shortcode ({% Author param %}). You can view the param type here.

Key links

Variants

Multiple Authors

View full screen

Code

Source (Nunjucks)

<div class="cluster">
  {% for item in data.items %}
  <div class="author">
    <a class="avatar" href="{{ item.url }}">
      <img
        alt="{{ item.name }}"
        height="64"
        src="https://web-dev.imgix.net/{{
          item.image
        }}?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
        width="64"
        loading="lazy"
        decoding="async"
        sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
        srcset="
          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
          https://web-dev.imgix.net/{{ item.image }}?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
        "
      />
    </a>
    <div class="flow">
      <cite class="author__name">
        <a href="{{ item.url }}" class="author__name-link">{{ item.name }}</a>
      </cite>
      <ul class="author__links cluster" role="list">
        {% for link in item.links %}
        <li class="author__link-listdata">
          <a href="{{ link.url }}" class="author__link">{{ link.text }}</a>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endfor %}
</div>

Output

<div class="cluster">
  <div class="author">
    <a class="avatar" href="#">
      <img
        alt="Collin Dion Agata"
        height="64"
        src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
        width="64"
        loading="lazy"
        decoding="async"
        sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
        srcset="
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
        "
      />
    </a>
    <div class="flow">
      <cite class="author__name">
        <a href="#" class="author__name-link">Collin Dion Agata</a>
      </cite>
      <ul class="author__links cluster" role="list">
        <li class="author__link-listdata">
          <a href="https://twitter.com/CollinDion" class="author__link"
            >Twitter</a
          >
        </li>
      </ul>
    </div>
  </div>
  <div class="author">
    <a class="avatar" href="#">
      <img
        alt="Collin Dion Agata"
        height="64"
        src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?auto=format&amp;fit=crop&amp;h=64&amp;w=64"
        width="64"
        loading="lazy"
        decoding="async"
        sizes="(min-width: 64px) 64px, calc(100vw - 48px)"
        srcset="
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=1&amp;q=75,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=2&amp;q=50 2x,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=3&amp;q=35 3x,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=4&amp;q=23 4x,
          https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=64&amp;w=64&amp;auto=format&amp;dpr=5&amp;q=20 5x
        "
      />
    </a>
    <div class="flow">
      <cite class="author__name">
        <a href="#" class="author__name-link">Collin Dion Agata</a>
      </cite>
      <ul class="author__links cluster" role="list">
        <li class="author__link-listdata">
          <a href="https://twitter.com/CollinDion" class="author__link"
            >Twitter</a
          >
        </li>
      </ul>
    </div>
  </div>
</div>