Pattern library

Authors

View full screen

Details

Source (Nunjucks)

<div class="w-author">
<a 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
"

class="w-author__image"
/>

</a>
<div
class="w-author__info"
style="display: flex; flex-direction: column; justify-content: center"
>

<cite class="w-author__name">
<a href="{{ data.url }}" class="w-author__name-link">{{ data.name }}</a>
</cite>
<ul class="w-author__link-list">
{% for link in data.links %}
<li class="w-author__link-listdata">
<a href="{{ link.url }}" class="w-author__link">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>

Output

<div class="w-author">
<a 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
"

class="w-author__image"
/>

</a>
<div
class="w-author__info"
style="display: flex; flex-direction: column; justify-content: center"
>

<cite class="w-author__name">
<a href="#" class="w-author__name-link">Collin Dion Agata</a>
</cite>
<ul class="w-author__link-list">

<li class="w-author__link-listdata">
<a href="https://twitter.com/CollinDion" class="w-author__link">Twitter</a>
</li>

</ul>
</div>
</div>

Variants

Card context

View full screen

Details

Source

<div class="w-authors__card">
<div class="w-author__image--row">
{% for author in data.authors %}
<div class="w-author__image--row-item">
<a href="{{ author.url }}">
<img
alt="{{ author.name }}"
class="w-author__image w-author__image--small"
height="40"
src="https://web-dev.imgix.net{{
author.image
}}?auto=format&amp;fit=crop&amp;h=40&amp;w=40"

width="40"
loading="lazy"
decoding="async"
sizes="(min-width: 40px) 40px, calc(100vw - 48px)"
srcset="
https://web-dev.imgix.net{{ author.image }}?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=1&amp;q=75,
https://web-dev.imgix.net{{ author.image }}?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=2&amp;q=50 2x,
https://web-dev.imgix.net{{ author.image }}?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=3&amp;q=35 3x,
https://web-dev.imgix.net{{ author.image }}?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=4&amp;q=23 4x,
https://web-dev.imgix.net{{ author.image }}?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=5&amp;q=20 5x
"

/>

</a>
</div>
{% endfor %}
</div>
<div class="w-authors__card--holder">
<span class="w-author__name">
{% for author in data.authors %}
<!--prettier-ignore-->
<a href="{{ author.url }}" class="w-author__name-link">{{ author.name }}</a>
<!--prettier-ignore-->
{% if not loop.last %},{% endif %}
<!--prettier-ignore-->
{% endfor %}
</span>
<div class="w-author__published">
<time>{{ data.date }}</time>
</div>
</div>
</div>

Output
<div class="w-authors__card">
<div class="w-author__image--row">

<div class="w-author__image--row-item">
<a href="#">
<img
alt="Collin Dion Agata"
class="w-author__image w-author__image--small"
height="40"
src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?auto=format&amp;fit=crop&amp;h=40&amp;w=40"
width="40"
loading="lazy"
decoding="async"
sizes="(min-width: 40px) 40px, calc(100vw - 48px)"
srcset="
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=1&amp;q=75,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=2&amp;q=50 2x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=3&amp;q=35 3x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=4&amp;q=23 4x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=5&amp;q=20 5x
"

/>

</a>
</div>

<div class="w-author__image--row-item">
<a href="#">
<img
alt="Swetha Gopalakrishnan"
class="w-author__image w-author__image--small"
height="40"
src="https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?auto=format&amp;fit=crop&amp;h=40&amp;w=40"
width="40"
loading="lazy"
decoding="async"
sizes="(min-width: 40px) 40px, calc(100vw - 48px)"
srcset="
https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=1&amp;q=75,
https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=2&amp;q=50 2x,
https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=3&amp;q=35 3x,
https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=4&amp;q=23 4x,
https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&amp;h=40&amp;w=40&amp;auto=format&amp;dpr=5&amp;q=20 5x
"

/>

</a>
</div>

</div>
<div class="w-authors__card--holder">
<span class="w-author__name">

<!--prettier-ignore-->
<a href="#" class="w-author__name-link">Collin Dion Agata</a>
<!--prettier-ignore-->
,
<!--prettier-ignore-->

<!--prettier-ignore-->
<a href="#" class="w-author__name-link">Swetha Gopalakrishnan</a>
<!--prettier-ignore-->

<!--prettier-ignore-->

</span>
<div class="w-author__published">
<time>Jun 15, 2021</time>
</div>
</div>
</div>

Multiple Authors

View full screen

Details

Source

<div class="w-authors">
{% for item in data.items %}
<div class="w-author">
<a 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
"

class="w-author__image"
/>

</a>
<div
class="w-author__info"
style="display: flex; flex-direction: column; justify-content: center"
>

<cite class="w-author__name">
<a href="{{ item.url }}" class="w-author__name-link">{{ item.name }}</a>
</cite>
<ul class="w-author__link-list">
{% for link in item.links %}
<li class="w-author__link-listitem">
<a href="{{ link.url }}" class="w-author__link">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
</div>

Output
<div class="w-authors">

<div class="w-author">
<a 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
"

class="w-author__image"
/>

</a>
<div
class="w-author__info"
style="display: flex; flex-direction: column; justify-content: center"
>

<cite class="w-author__name">
<a href="#" class="w-author__name-link">Collin Dion Agata</a>
</cite>
<ul class="w-author__link-list">

<li class="w-author__link-listitem">
<a href="https://twitter.com/CollinDion" class="w-author__link">Twitter</a>
</li>

</ul>
</div>
</div>

<div class="w-author">
<a 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
"

class="w-author__image"
/>

</a>
<div
class="w-author__info"
style="display: flex; flex-direction: column; justify-content: center"
>

<cite class="w-author__name">
<a href="#" class="w-author__name-link">Collin Dion Agata</a>
</cite>
<ul class="w-author__link-list">

<li class="w-author__link-listitem">
<a href="https://twitter.com/CollinDion" class="w-author__link">Twitter</a>
</li>

</ul>
</div>
</div>

</div>

Page context

View full screen

Details

Source

<header class="w-author-page-header w-page-header">
<img
alt="{{ data.name }}"
class="w-author-page__image"
height="192"
src="https://web-dev.imgix.net{{ data.image }}?auto=format"
width="192"
loading="lazy"
decoding="async"
sizes="(min-width: 481px) 192px, 128px"
srcset="
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=128 128w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=146 146w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=166 166w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=190 190w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=216 216w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=246 246w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=281 281w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=320 320w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=365 365w,
https://web-dev.imgix.net{{ data.image }}?auto=format&amp;w=384 384w
"

/>

<h1 class="w-author-page-header__headline w-page-header__headline">
{{ data.name }}
</h1>
<p class="w-page-header__copy">
{{ data.bio }}
</p>
<div class="w-author-page__links">
{% for item in data.links %}
<a href="{{ item.url }}" class="w-author-page__link" target="_blank">
<img
alt="{{ item.text }}"
class="w-author-page__icon"
height="32"
src="{{ item.icon }}"
width="32"
/>

</a>
{% endfor %}
</div>
</header>

Output
<header class="w-author-page-header w-page-header">
<img
alt="Rachel Andrew"
class="w-author-page__image"
height="192"
src="https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format"
width="192"
loading="lazy"
decoding="async"
sizes="(min-width: 481px) 192px, 128px"
srcset="
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=128 128w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=146 146w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=166 166w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=190 190w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=216 216w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=246 246w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=281 281w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=320 320w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=365 365w,
https://web-dev.imgix.net/image/admin/dUAN2DEXHRT6G6iPrIby.jpg?auto=format&amp;w=384 384w
"

/>

<h1 class="w-author-page-header__headline w-page-header__headline">
Rachel Andrew
</h1>
<p class="w-page-header__copy">
Freelance writer and editor. CSS Working Group Invited Expert.
</p>
<div class="w-author-page__links">

<a href="https://rachelandrew.co.uk/" class="w-author-page__link" target="_blank">
<img
alt="Homepage"
class="w-author-page__icon"
height="32"
src="/images/icons/language.svg"
width="32"
/>

</a>

<a href="https://twitter.com/rachelandrew" class="w-author-page__link" target="_blank">
<img
alt="Twitter"
class="w-author-page__icon"
height="32"
src="/images/icons/twitter.svg"
width="32"
/>

</a>

<a href="https://github.com/rachelandrew" class="w-author-page__link" target="_blank">
<img
alt="GitHub"
class="w-author-page__icon"
height="32"
src="/images/icons/github.svg"
width="32"
/>

</a>

<a href="https://glitch.com/@rachelandrew" class="w-author-page__link" target="_blank">
<img
alt="Glitch"
class="w-author-page__icon"
height="32"
src="/images/icons/glitch.svg"
width="32"
/>

</a>

<a href="/authors/rachelandrew/feed.xml" class="w-author-page__link" target="_blank">
<img
alt="RSS Feed"
class="w-author-page__icon"
height="32"
src="/images/icons/rss.svg"
width="32"
/>

</a>

</div>
</header>