Overview
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 and group related content or tasks.
Cards are used to organise information related to a single topic. Cards can contain multiple elements, such as images, links, actions, text, tags and more.
There are 3 primary types of cards current available in our Design System:
- No action (Non-clickable cards)
- Single action
- Multiple action.
Each of these cards has a number of variations available such as colour, call to actions, tags and image.
Vanilla example
-
No action card
The text used here is card description text. It should be no more than 2-3 lines long.
-
Single action card
The text used here is card description text. It should be no more than 2-3 lines long.
-
Multi action card
The text used here is card description text. It should be no more than 2-3 lines long.
<ul class="qld__card-list qld__card-list--matchheight">
<li class="col-xs-12 col-md-6 col-lg-4 qld__card-list--matchheight qld__card-list--col">
<!-- QLD No action default with image -->
<div class="qld__card qld__card--image">
<!-- Image -->
<div class="qld__responsive-media-img--bg" role="img" aria-label="A customer smiling at his two children" style="background-image: url('./?a=110276');">
</div>
<!-- Card Inner -->
<div class="qld__card__inner">
<!-- Card Content -->
<div class="qld__card__content">
<div class="qld__card__content-inner">
<!-- Card Ttile -->
<h3 class="qld__card__title">
No action card
</h3>
<!-- Card Description -->
<p class="qld__card__description">
The text used here is card description text. It should be no more than 2-3 lines long.
</p>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-md-6 col-lg-4 qld__card-list--matchheight qld__card-list--col">
<!-- QLD Single action default with image -->
<div class="qld__card qld__card__action qld__card--image">
<!-- Image -->
<div class="qld__responsive-media-img--bg" role="img" aria-label="A customer smiling at his two children" style="background-image: url('./?a=110276');">
</div>
<!-- Card Inner -->
<div class="qld__card__inner">
<!-- Card Content -->
<div class="qld__card__content">
<div class="qld__card__content-inner">
<!-- Card Ttile -->
<h3 class="qld__card__title">
<a class="qld__card--clickable__link" href="#section__usage-guidelines">Single action card</a>
</h3>
<!-- Card Description -->
<p class="qld__card__description">
The text used here is card description text. It should be no more than 2-3 lines long.
</p>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-md-6 col-lg-4 qld__card-list--matchheight qld__card-list--col">
<!-- QLD Multi-action card with image and links -->
<div class="qld__card qld__card--image qld__card__multi-action">
<!-- Image -->
<div class="qld__responsive-media-img--bg" role="img" aria-label="A customer smiling at his two children" style="background-image: url('./?a=110276');">
</div>
<!-- Card Inner -->
<div class="qld__card__inner">
<!-- Card Content -->
<div class="qld__card__content">
<div class="qld__card__content-inner">
<!-- Card Ttile -->
<h3 class="qld__card__title">
<a class="qld__card--clickable__link" href="#section__usage-guidelines">Multi action card</a>
</h3>
<!-- Card Description -->
<p class="qld__card__description">
The text used here is card description text. It should be no more than 2-3 lines long.
</p>
</div>
</div>
<!-- Card Footer -->
<div class="qld__card__footer">
<hr class="qld__horizontal-rule" aria-hidden="true">
<!-- Card Footer text -->
<div class="qld__card__footer-inner">
<!-- Card Footer Links -->
<ul class="qld__link-list">
<li>
<a href="#section__usage-guidelines" class="qld__card__footer-link">
<i class="qld__card__footer-link-icon fal fa-directions" aria-hidden="true"></i>
<span>Card link one</span>
</a>
</li>
<li>
<a href="#section__usage-guidelines" class="qld__card__footer-link">
<i class="qld__card__footer-link-icon fal fa-car-side" aria-hidden="true"></i>
<span>Card link two</span>
</a>
</li>
<li>
<a href="#section__usage-guidelines" class="qld__card__footer-link">
<i class="qld__card__footer-link-icon fal fa-stethoscope" aria-hidden="true"></i>
<span>Card link three</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
Usage guidelines
When to use cards
- Cards are better suited when users browse for information than when they search, this is because card layouts are less scannable than lists (Laubheimer, 2016)
- Cards are an excellent choice for dashboard applications and for social or aggregation sites that display a variety of content types at the same time on the same page (Laubheimer, 2016)
When not to use cards
- Avoid using cards instead of table rows for organised information
- If the reader needs to read the content in order, use a list or simple paragraphs with headings
- Cards are also a poor choice when users need to compare between multiple options, since cards often aren't structured in a predictable way from item to item (Nielson, 2013)
- You have many sections with little information in each—use a table
- to link to content lower down on the page, consider in-page navigation
How to use cards
Do
- Display cards together in a grid or vertical list
- Keep to one concept per card: You can use multiple elements such as images, text, links and icons but they should all constitute one thought or action
- Consider and choose text and visual elements carefully: Test your cards with minimal content and only add additional content or graphics where they give needed context to the user
- Keep text short and concise: According to Google's Material Design guidelines, cards should "display a small amount of information at a glance, usually no more than 2-3 lines of text" (Material Design, n.d.)
Don't
- Overload with information as the card links to content that contains more detail
- Use multiple different styles of cards in the same section. This can create conflicting visual messages, and cause visually cluttered page
- Don’t include inline links. A card should be a singular link or provide a limited set of actions