Cards - Component

View full screen
Code

Source (Nunjucks)

<article class="card">
  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">
      <a href="{{ data.url }}">{{ data.title }}</a>
    </h3>
    <p>{{ data.summary }}</p>
    {% if data.authors %}
      <div class="cluster gutter-base">
        <div class="card__avatars cluster" aria-hidden="true">
          {% for author in data.authors %}
          <a class="avatar" href="{{ author.url }}">
            <img src="{{ author.image }}" alt="Image of {{ author.name }}" />
          </a>
          {% endfor %}
        </div>
        <ul class="card__authors flow-space-base cluster" aria-label="authors" role="list">
          {% for author in data.authors %}
          <li>
            <a href="{{ author.url }}">{{ author.name }}</a>{% if not loop.last %},{% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>
  <a class="card__action" href="{{ href.data.url }}">More</a>
</article>

Output

<article class="card">
  <img
    src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?auto=format&w=1600"
    alt="Images of the BliBli app."
  />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">
      <a href="#"
        >Blibli's PWA generates 10x more revenue per user than their previous
        mobile website</a
      >
    </h3>
    <p>
      How Blibli achieved a 42% reduction in bounce rate, an 8x improvement in
      mobile conversion rate, and 2.5x more pages per session.
    </p>
    <div class="cluster gutter-base">
      <div class="card__avatars cluster" aria-hidden="true">
        <a class="avatar" href="https://web.dev/authors/collindionagata/">
          <img
            src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&h=64&w=64&auto=format&dpr=2&q=50"
            alt="Image of Collin Dion Agata"
          />
        </a>
      </div>
      <ul
        class="card__authors flow-space-base cluster"
        aria-label="authors"
        role="list"
      >
        <li>
          <a href="https://web.dev/authors/collindionagata/"
            >Collin Dion Agata</a
          >
        </li>
      </ul>
    </div>
  </div>
  <a class="card__action" href="">More</a>
</article>

Information

The basic card is an <article>, which, to make the whole thing clickable, you add a .card__action element. This uses the breakout button technique. The .card can also be an <a> element, like this example.

The authors section is a list, even if there's just one author. This effortlessly expands to multiple that way.

If you want to just display a summary as the content (see this example), it's recommended that you remove the flow utility from .card__content and add the visually hidden utility to your heading.

Feature cards

There’s an example feature card in the variants. More detail can be found on the feature card section.

Variants

Branded

View full screen
Code

Source (Nunjucks)

<a href="{{ data.url }}" class="card" data-style="branded">
  <div class="card__header repel">
    <p class="color-mid-text">{{ data.header.text }}</p> 
    <div class="counter {{ data.header.counter.utilities }}">
      <span class="counter__content">{{ data.header.counter.count }}</span>
      {% include data.header.counter.icon %}
    </div>
  </div>
  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
  <div class="card__content flow">
    <h3 class="visually-hidden">{{ data.title }}</h3>
    <img class="card__logo" src="{{ data.logo }}" alt="" aria-hidden="true" />
    <p class="text-size-0">{{ data.summary }}</p>
  </div>
</a>

Output

<a href="#" class="card" data-style="branded">
  <div class="card__header repel">
    <p class="color-mid-text">Course</p>
    <div class="counter t-bg-highlights-purple t-color-shades-light-bright">
      <span class="counter__content">24</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <path
          d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
        />
        <path
          d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
        />
      </svg>
    </div>
  </div>
  <img src="/images/courses/css/card.svg" alt="Learn CSS branding" />
  <div class="card__content flow">
    <h3 class="visually-hidden">Learn CSS</h3>
    <img
      class="card__logo"
      src="/images/courses/css/logo.svg"
      alt=""
      aria-hidden="true"
    />
    <p class="text-size-0">
      Let’s gleefully breakdown complex aspects of CSS into digestible episodes
      covering everything from accessibility to z-index.
    </p>
  </div>
</a>

Feature Card

View full screen
Code

Source (Nunjucks)

<a class="feature-card" href="{{ data.url }}" {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}>
  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
</a>

Output

<a class="feature-card" href="#">
  <span class="feature-card__eyebrow">Web vitals</span>
  <h3 class="feature-card__title">
    Making their web app installable resulted in increased traffic
  </h3>
  <img
    class="feature-card__background"
    loading="lazy"
    alt=""
    aria-hidden="true"
    src="/images/feature-cards/web-vitals-feature.png"
  />
</a>

With a visually hidden heading

View full screen
Code

Source (Nunjucks)

<a href="{{ data.url }}" class="card">
  <ul class="card__meta" role="list">
    <li>Collection</li>
    <li>23 resources</li>
  </ul>
  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
  <div class="card__content">
    <h3 class="visually-hidden">{{ data.title }}</h3>
    <p>{{ data.summary }}</p>
  </div>
</a>

Output

<a href="#" class="card">
  <ul class="card__meta" role="list">
    <li>Collection</li>
    <li>23 resources</li>
  </ul>
  <img src="https://web.dev/images/courses/css/card.svg" alt="Illustration" />
  <div class="card__content">
    <h3 class="visually-hidden">Learn CSS</h3>
    <p>
      Let’s gleefully breakdown complex aspects of CSS into digestible episodes
      covering everything from accessibility to z-index.
    </p>
  </div>
</a>

Multiple Authors

View full screen
Code

Source (Nunjucks)

<article class="card">
  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">
      <a href="{{ data.url }}">{{ data.title }}</a>
    </h3>
    <p>{{ data.summary }}</p>
    {% if data.authors %}
      <div class="cluster gutter-base">
        <div class="card__avatars cluster" aria-hidden="true">
          {% for author in data.authors %}
          <a class="avatar" href="{{ author.url }}">
            <img src="{{ author.image }}" alt="Image of {{ author.name }}" />
          </a>
          {% endfor %}
        </div>
        <ul class="card__authors flow-space-base cluster" aria-label="authors" role="list">
          {% for author in data.authors %}
          <li>
            <a href="{{ author.url }}">{{ author.name }}</a>{% if not loop.last %},{% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>
  <a class="card__action" href="{{ href.data.url }}">More</a>
</article>

Output

<article class="card">
  <img
    src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/nO8c2UEgQRXsoYVp3tZO.png?auto=format&w=1600"
    alt="Images of the BliBli app."
  />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">
      <a href="#"
        >Blibli's PWA generates 10x more revenue per user than their previous
        mobile website</a
      >
    </h3>
    <p>
      How Blibli achieved a 42% reduction in bounce rate, an 8x improvement in
      mobile conversion rate, and 2.5x more pages per session.
    </p>
    <div class="cluster gutter-base">
      <div class="card__avatars cluster" aria-hidden="true">
        <a class="avatar" href="https://web.dev/authors/collindionagata/">
          <img
            src="https://web-dev.imgix.net/image/sQ51XsLqKMgSQMCZjIN0B7hlBO02/ZpE2N6yjkaqQNcSiaxvR.jpeg?fit=crop&h=64&w=64&auto=format&dpr=2&q=50"
            alt="Image of Collin Dion Agata"
          />
        </a>
        <a class="avatar" href="https://web.dev/authors/swethagopalakrishnan/">
          <img
            src="https://web-dev.imgix.net/image/ZDZVuXt6QqfXtxkpXcPGfnygYjd2/Mpe7GGUwnUsy9Gx7UxZK.jpg?fit=crop&h=64&w=64&auto=format&dpr=2&q=50"
            alt="Image of Swetha Gopalakrishnan"
          />
        </a>
      </div>
      <ul
        class="card__authors flow-space-base cluster"
        aria-label="authors"
        role="list"
      >
        <li>
          <a href="https://web.dev/authors/collindionagata/"
            >Collin Dion Agata</a
          >,
        </li>
        <li>
          <a href="https://web.dev/authors/swethagopalakrishnan/"
            >Swetha Gopalakrishnan</a
          >
        </li>
      </ul>
    </div>
  </div>
  <a class="card__action" href="">More</a>
</article>

Path Card

View full screen
Code

Source (Nunjucks)

<a href="{{ data.url }}" class="card">
  <ul class="card__meta" role="list">
    <li>Collection</li>
    <li>23 resources</li>
  </ul>
  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">{{ data.title }}</h3>
    <p>{{ data.summary }}</p>
  </div>
</a>

Output

<a href="#" class="card">
  <ul class="card__meta" role="list">
    <li>Collection</li>
    <li>23 resources</li>
  </ul>
  <img
    src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg"
    alt="Illustration"
  />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">Web Vitals</h3>
    <p>Essential metrics for a healthy site.</p>
  </div>
</a>

With Header

View full screen
Code

Source (Nunjucks)

<a href="{{ data.url }}" class="card">
  <div class="card__header repel">
    <p class="color-mid-text">{{ data.header.text }}</p> 
    <div class="counter" data-layout="flush">
      <span class="counter__content">{{ data.header.counter.count }}</span>
      {% include data.header.counter.icon %}
    </div>
  </div>
  <img src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">{{ data.title }}</h3>
    <p>{{ data.summary }}</p>
  </div>
</a>

Output

<a href="#" class="card">
  <div class="card__header repel">
    <p class="color-mid-text">Collection</p>
    <div class="counter" data-layout="flush">
      <span class="counter__content">69</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <path
          d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
        />
        <path
          d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
        />
      </svg>
    </div>
  </div>
  <img
    src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg"
    alt="Illustration"
  />
  <div class="card__content flow">
    <h3 class="card__heading text-size-3">Web Vitals</h3>
    <p>Essential metrics for a healthy site.</p>
  </div>
</a>