Single action
Single action cards
Single action cards display content and actions on a single topic.
These are the default cards and should always have some form of interactive element or action. Single action cards have only one primary link or action. Only single actions cards have changes in their hover state. For single action cards the hit area for the card wraps the entire card.
Single action cards are available in 5 varieties
- Default: default card used to organise information related to a single topic.
- Leading icon: a variant where an icon is placed on left of the content.
- Stacked icon: a variant of the default card where an icon is placed at the top of the card.
- Arrow card: a variant of the default card where a trailing arrow icon is placed after the heading.
- Image card: a variant of the default card using an image.
Vanilla example
Default card
The text used here is card description text. It should be no more than 2-3 lines long.
Card with arrow
The text used here is card description text. It should be no more than 2-3 lines long.
Card with image and footer
The text used here is card description text. It should be no more than 2-3 lines long.
Card with footer
The text used here is card description text. It should be no more than 2-3 lines long.
<div class="row qld__row-gap-component">
<div class="col-xs-12 col-md-6 qld__display-flex qld__flex-column qld__row-gap-component">
<!-- QLD Single action -->
<div class="qld__card qld__card__action qld__card__action">
<!-- 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="javascript:void(0);">Default 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>
<!-- QLD Single action arrow card -->
<div class="qld__card qld__card__action qld__card--arrow">
<div class="qld__card__inner">
<!-- Card Content -->
<div class="qld__card__content">
<div class="qld__card__content-inner">
<!-- Card Title -->
<h3 class="qld__card__title">
<a class="qld__card--clickable__link" href="javascript:void(0);">Card with arrow</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>
<!-- Arrow icon -->
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md">
<use href="?a=169317:dist/mysource_files/img/QLD-icons.svg#arrow-right">
</use>
</svg>
</div>
</div>
</div>
<!-- QLD Single action vertical icon card -->
<div class="qld__card qld__card__action qld__card--icon">
<!-- Icon -->
<div class="qld__card__icon">
<i class="fa-light fa-alicorn" aria-hidden="true"></i>
</div>
<!-- Card Inner -->
<div class="qld__card__inner">
<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="javascript:void(0);">Card with stacked icon</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>
<!-- QLD Single action leading icon card -->
<div class="qld__card qld__card__action qld__card--icon qld__card--icon-left">
<!-- Icon -->
<div class="qld__card__icon">
<i class="fa-light fa-alicorn" aria-hidden="true"></i>
</div>
<!-- Card Inner -->
<div class="qld__card__inner">
<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="javascript:void(0);">Card with leading icon</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>
</div>
<div class="col-xs-12 col-md-6 qld__display-flex qld__flex-column qld__row-gap-component">
<!-- 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="javascript:void(0);">Card with image and footer</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>
<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="javascript:void(0);">Card with footer</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">
This is card footer text
</div>
</div>
</div>
</div>
</div>
</div>
Usage guidelines
When to use
Use single action cards when a card links to a single piece of content. Single action cards are useful to present a collection of related groups of content, like articles or sections of a website. Single action cards are often used as a preview of the full content available such as for an article or blog post.
When not to use
- Alone with as an individual call to action. Use a button instead
- When you need to have multiple links within the card element use a multi-action card instead
- As the only form of navigation, while cards can be a useful navigation tool, relying solely on cards for navigation can be limiting. It's important to provide other forms of navigation to help users find what they're looking for.