Pattern library

Cards

Needs lots of work so all samples are currently static

View full screen

Details

Source (Nunjucks)

<div class="w-card" role="listitem">
<article class="w-card-base">
<div class="w-card-base__cover w-card-base__cover--with-image">
<a
href="/blibli/"
class="w-card-base__link"
tabindex="-1"
aria-hidden="true"
>
<figure class="w-card-base__figure">
<img
alt="Images of the BliBli app."
class="w-card-base__image"
height="240"
src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?auto=format&amp;fit=crop&amp;h=240&amp;w=354"
width="354"
loading="lazy"
decoding="async"
sizes="(min-width: 354px) 354px, calc(100vw - 48px)"
srcset="
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=1&amp;q=75,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=2&amp;q=50 2x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=3&amp;q=35 3x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=4&amp;q=23 4x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=5&amp;q=20 5x
"

/>
</figure
>
</a>
</div>
<div class="w-card-base__blurb">
<a href="/blibli/" class="w-card-base__link"
>
<h2 class="w-card-base__headline--with-image">
Blibli's PWA generates 10x more revenue per user than their previous
mobile website
</h2></a
>

<div class="w-authors__card">
<div class="w-author__image--row">
<div class="w-author__image--row-item">
<a href="/authors/swethagopalakrishnan/"
>
<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 class="w-author__image--row-item">
<a href="/authors/collindionagata/"
>
<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>
<div class="w-authors__card--holder">
<span class="w-author__name"
>
<a href="/authors/collindionagata/" class="w-author__name-link"
>
Collin Dion Agata</a
>
,
<a href="/authors/swethagopalakrishnan/" class="w-author__name-link"
>
Swetha Gopalakrishnan</a
>
</span
>

<div class="w-author__published"><time>Jun 15, 2021</time></div>
</div>
</div>
<div class="w-card-base__desc">
<a href="/blibli/" class="w-card-base__link" tabindex="-1"
>
<p class="w-card-base__subhead">
How Blibli achieved a 42% reduction in bounce rate, an 8x
improvement in mobile conversion rate, and 2.5x more pages per
session.
</p></a
>

<div class="w-card__chips w-chips">
<a href="/tags/capabilities/" class="w-chip">Capabilities</a>
<a href="/tags/case-study/" class="w-chip">Case Study</a>
</div>
</div>
</div>
</article>
</div>

Output

<div class="w-card" role="listitem">
<article class="w-card-base">
<div class="w-card-base__cover w-card-base__cover--with-image">
<a
href="/blibli/"
class="w-card-base__link"
tabindex="-1"
aria-hidden="true"
>
<figure class="w-card-base__figure">
<img
alt="Images of the BliBli app."
class="w-card-base__image"
height="240"
src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?auto=format&amp;fit=crop&amp;h=240&amp;w=354"
width="354"
loading="lazy"
decoding="async"
sizes="(min-width: 354px) 354px, calc(100vw - 48px)"
srcset="
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=1&amp;q=75,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=2&amp;q=50 2x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=3&amp;q=35 3x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=4&amp;q=23 4x,
https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?fit=crop&amp;h=240&amp;w=354&amp;auto=format&amp;dpr=5&amp;q=20 5x
"

/>
</figure
>
</a>
</div>
<div class="w-card-base__blurb">
<a href="/blibli/" class="w-card-base__link"
>
<h2 class="w-card-base__headline--with-image">
Blibli's PWA generates 10x more revenue per user than their previous
mobile website
</h2></a
>

<div class="w-authors__card">
<div class="w-author__image--row">
<div class="w-author__image--row-item">
<a href="/authors/swethagopalakrishnan/"
>
<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 class="w-author__image--row-item">
<a href="/authors/collindionagata/"
>
<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>
<div class="w-authors__card--holder">
<span class="w-author__name"
>
<a href="/authors/collindionagata/" class="w-author__name-link"
>
Collin Dion Agata</a
>
,
<a href="/authors/swethagopalakrishnan/" class="w-author__name-link"
>
Swetha Gopalakrishnan</a
>
</span
>

<div class="w-author__published"><time>Jun 15, 2021</time></div>
</div>
</div>
<div class="w-card-base__desc">
<a href="/blibli/" class="w-card-base__link" tabindex="-1"
>
<p class="w-card-base__subhead">
How Blibli achieved a 42% reduction in bounce rate, an 8x
improvement in mobile conversion rate, and 2.5x more pages per
session.
</p></a
>

<div class="w-card__chips w-chips">
<a href="/tags/capabilities/" class="w-chip">Capabilities</a>
<a href="/tags/case-study/" class="w-chip">Case Study</a>
</div>
</div>
</div>
</article>
</div>

Variants

Path Card

View full screen

Details

Source

<a href="/reliable" class="w-card" role="listitem"
>
<div class="w-path-card">
<div class="w-path-card__info">
<ul class="w-path-card__info-list">
<li
class="w-path-card__info-listitem w-path-card__info-listitem--category"
>

Collection
</li>
<li
class="w-path-card__info-listitem w-path-card__info-listitem--more-info"
>

23 resources
</li>
<li
class="w-path-card__info-listitem w-path-card__info-listitem--updated"
>

Updated <time></time>
</li>
</ul>
</div>
<div class="w-path-card__cover">
<img
class="w-path-card__cover-image"
src="https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/9K5gvnLRtD0yyiJM2r0c.svg"
alt=""
height="240"
width="100%"
loading="lazy"
/>

</div>
<div class="w-path-card__desc">
<h2 class="w-path-card__headline">Network reliability</h2>
<p class="w-path-card__subhead">
See consistent, reliable performance regardless of network quality.
</p>
</div>
</div></a
>

Output
<a href="/reliable" class="w-card" role="listitem"
>
<div class="w-path-card">
<div class="w-path-card__info">
<ul class="w-path-card__info-list">
<li
class="w-path-card__info-listitem w-path-card__info-listitem--category"
>

Collection
</li>
<li
class="w-path-card__info-listitem w-path-card__info-listitem--more-info"
>

23 resources
</li>
<li
class="w-path-card__info-listitem w-path-card__info-listitem--updated"
>

Updated <time></time>
</li>
</ul>
</div>
<div class="w-path-card__cover">
<img
class="w-path-card__cover-image"
src="https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/9K5gvnLRtD0yyiJM2r0c.svg"
alt=""
height="240"
width="100%"
loading="lazy"
/>

</div>
<div class="w-path-card__desc">
<h2 class="w-path-card__headline">Network reliability</h2>
<p class="w-path-card__subhead">
See consistent, reliable performance regardless of network quality.
</p>
</div>
</div></a
>