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.
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
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.
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
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.
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>
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>