Card title
Additional text when the card title alone may not be enough.
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.
Cards include an option for either a light or dark theme.
Additional text when the card title alone may not be enough.
Additional text details when the card title alone may not be enough.
<!-- 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>
Additional text when the card title alone may not be enough.
Additional text when the card title alone may not be enough.
Additional text when the card title alone may not be enough.
<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>
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.
Additional text when the card title alone may not be enough.
Additional text when the card title alone may not be enough.
<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>
Additional text when the card title alone may not be enough.
Additional text when the card title alone may not be enough.
<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>
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.
Additional text when the card title alone may not be enough.
Additional text when the card title alone may not be enough.
<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>
See the tag component for further usage guidance.
Additional text when the card title alone may not be enough.
Grey PurpleAdditional text when the card title alone may not be enough.
Yellow Green PinkAdditional text when the card title alone may not be enough.
Orange Blue Red<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>