Skip links and keyboard navigation

SWE components

Cards

Overview

The card component is used to provide a brief summary of content or a task, often with a link to more detail. Cards are frequently displayed alongside other cards to group related content or tasks.

Cards can contain multiple elements, such as text, images, links and call to action buttons, in any combination.

Basic

Cards include an option for either a light or dark theme.

View example in Storybook

Code

<!--
  Light theme: <article class="qg-card qg-card__light-theme"
  Dark theme: <article class="qg-card qg-card"
-->

<section class="row qg-cards qg-cards__equal-height">
    <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4 ">
        <div class="content">
            <div class="details qg-cards__row-1" >
                <h2>Card title</h2>
                <p>Additional text when the card title alone may not be enough.</p>
            </div>
        </div>
    </article>
    <article class="qg-card qg-card col-12 col-sm-6 col-lg-4 ">
        <div class="content">
            <div class="details qg-cards__row-1">
                <h2>Card title</h2>
                <p>Additional text details when the card title alone may not be enough.</p>
            </div>
        </div>
    </article>
</section>

With a call to action button

View example in Storybook

Code

<section class="row qg-cards cards__equal-height">
  <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
    <div class="content">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
      </div>
      <div class="qg-card__footer">
        <a href="#" class="qg-btn btn-secondary">Call to action</a>
      </div>
    </div>
  </article>
  <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
    <div class="content">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
      </div>
      <div class="qg-card__footer">
        <a href="#" class="qg-btn btn-outline-dark">Call to action</a>
      </div>
    </div>
  </article>
  <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
    <div class="content">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
      </div>
      <div class="qg-card__footer">
        <a href="#" class="qg-btn btn-link">Call to action</a>
      </div>
    </div>
  </article>
</section>

With an image

The card images naturally fill to the full width of its parent element (the card), which leave their height as fluid.

The minimum image size is 750 x 422 pixels. For best results, use images with an aspect ratio of 16:9.

View example in Storybook

Code

<section class="row qg-cards cards__equal-height">
  <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
    <div class="content">
      <img src="https://via.placeholder.com/750x422/ddd/ddd" alt="">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
        <ul>
            <li><a href="#">List item link</a></li>
            <li><a href="#">List item link</a></li>
            <li><a href="#">List item link</a></li>
        </ul>
      </div>
    </div>
  </article>
  <article class="qg-card col-12 col-sm-6 col-lg-4">
    <div class="content">
      <img src="https://via.placeholder.com/750x422/ddd/ddd" alt="">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
        <ul>
            <li><a href="#">List item link</a></li>
            <li><a href="#">List item link</a></li>
            <li><a href="#">List item link</a></li>
        </ul>
      </div>
    </div>
  </article>
</section>

With a thumbnail

View example in Storybook

Code

<section class="row qg-cards cards__equal-height">
  <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
    <div class="content">
      <img src="http://via.placeholder.com/750x422/ddd/ddd" class="qg-card__thumbnail" alt="">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
        <ul>
            <li><a href="#">List item link</a></li>
            <li><a href="#">List item link</a></li>
        </ul>
      </div>
    </div>
  </article>
  <article class="qg-card qg-card col-12 col-sm-6 col-lg-4">
    <div class="content">
      <img src="http://via.placeholder.com/750x422/ddd/ddd" class="qg-card__thumbnail" alt="">
      <div class="details">
        <h2>Card title</h2>
        <p>Additional text when the card title alone may not be enough.</p>
        <ul>
            <li><a href="#">List item link</a></li>
            <li><a href="#">List item link</a></li>
        </ul>
      </div>
    </div>
  </article>
</section>

Clickable

For cards that contain a single link, the hit area for that link can be made to wrap the entire card. This feature provides additional visual cues (e.g. a shadow) to the user that the entire visual bounds of the card is clickable.

To make a clickable card, add .stretched-link to a link to make its containing block clickable and qg-card__clickable on the container. For more information, please see the Bootstrap documentation.

View example in Storybook

Code

<section class="row cards__equal-height">
    <article class="qg-card qg-card__light-theme qg-card__clickable col-12 col-sm-6 col-lg-4">
      <div class="content">
        <div class="details">
          <h2 class="qg-card__title"><a href="#" class="stretched-link">Card title</a></h2>
        </div>
      </div>
    </article>
    <article class="qg-card qg-card__clickable col-12 col-sm-6 col-lg-4">
      <div class="content">
        <div class="details">
          <h2 class="qg-card__title"><a href="#" class="stretched-link">Card title</a></h2>
        </div>
      </div>
    </article>
</section>

<section class="row cards__equal-height">
    <article class="qg-card qg-card__light-theme qg-card__clickable col-12 col-sm-6 col-lg-4">
      <div class="content">
        <div class="details">
          <h2 class="qg-card__title"><a href="#" class="stretched-link">Card title</a></h2>
          <p>Additional text when the card title alone may not be enough.</p>
        </div>
      </div>
    </article>
    <article class="qg-card qg-card__clickable col-12 col-sm-6 col-lg-4">
      <div class="content">
        <div class="details">
          <h2 class="qg-card__title"><a href="#" class="stretched-link">Card title</a></h2>
          <p>Additional text when the card title alone may not be enough.</p>
        </div>
      </div>
    </article>
</section>

With tags

See the tag component for further usage guidance.

View example in Storybook

Code

<section class="row qg-cards qg-cards__equal-height">
    <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
        <div class="content">
            <div class="details qg-cards__row-1">
                <h2>Card title</h2>
                <p>Additional text when the card title alone may not be enough.</p>
                
                <!-- Tags for card 1 -->
                <span class="badge badge-pill qg-tag qg-tag-grey">Grey</span>
                <span class="badge badge-pill qg-tag qg-tag-purple">Purple</span>
                <!-- End Tags for card 1 -->
            </div>
        </div>
    </article>
            <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
                <div class="content">
                    <div class="details qg-cards__row-1">
                        <h2>Card title</h2>
                        <p>Additional text when the card title alone may not be enough.</p>
                        
                        <!-- Tags for card 2 -->
                        <span class="badge badge-pill qg-tag qg-tag-yellow">Yellow</span>
                        <span class="badge badge-pill qg-tag qg-tag-green">Green</span>
                        <span class="badge badge-pill qg-tag qg-tag-pink">Pink</span>
                        <!-- End Tags for card 2 -->
                    </div>
                </div>
    </article>
        <article class="qg-card qg-card__light-theme col-12 col-sm-6 col-lg-4">
        <div class="content">
            <div class="details qg-cards__row-1">
                <h2>Card title</h2>
                <p>Additional text when the card title alone may not be enough.</p>
                <!-- Tags for card 3 -->
                <span class="badge badge-pill qg-tag qg-tag-orange">Orange</span>
                <span class="badge badge-pill qg-tag qg-tag-blue">Blue</span>
                <span class="badge badge-pill qg-tag qg-tag-red">Red</span>
                <!-- End Tags for card 3 -->
            </div>
        </div>
    </article>
</section>
Last updated:
28 June 2024