Multi action
Multi-action cards
Multiple action cards contain more than one link.
Their design is different to single action cards because they need to accommodate for different hover, focus states and keyboard navigation.
Multiple action cards have no shadows on desktop, but they do have a subtle shadow on mobile. Multiple action cards are commonly used for, news cards and facility cards.
Multi action cards are available in 4 varieties
- Default Default: card used to organise information related to a single topic.
- Leading icon: A variant of the default card where an icon is placed on left of the content. This is a good option for when cards need to be placed in a vertical list or where vertical height is limited.
- Stacked icon: A variant of the default card where an icon is placed at the top of the card.
- 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 image and links
The text used here is card description text. It should be no more than 2-3 lines long.
Card with image and tags
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 Multi-action action with links-->
<div class="qld__card qld__card__multi-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 class="qld__card__footer">
<hr class="qld__horizontal-rule" aria-hidden="true">
<!-- Card Footer text -->
<div class="qld__card__footer-inner">
<!-- Card links -->
<ul class="qld__link-list">
<li>
<a href="javascript:void(0);" 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="javascript:void(0);" 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 aria-label="Our services, Our services" href="javascript:void(0);" 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>
</div>
<!-- QLD Multi-action action vertical icon card with tags -->
<div class="qld__card qld__card__multi-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 class="qld__card__footer">
<hr class="qld__horizontal-rule" aria-hidden="true">
<!-- Card Footer text -->
<div class="qld__card__footer-inner">
<ul class="qld__card__tags qld__tag-list">
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_1">Tag 1</a>
</li>
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_2">Tag 2</a>
</li>
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_3">Tag 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- QLD Multi-action leading icon card with tags -->
<div class="qld__card qld__card__multi-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 class="qld__card__footer">
<hr class="qld__horizontal-rule" aria-hidden="true">
<!-- Card Footer text -->
<div class="qld__card__footer-inner">
<ul class="qld__card__tags qld__tag-list">
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_1">Tag 1</a>
</li>
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_2">Tag 2</a>
</li>
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_3">Tag 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 qld__display-flex qld__flex-column qld__row-gap-component">
<!-- 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="javascript:void(0);">Card with image and links</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="javascript:void(0);" 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="javascript:void(0);" 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 aria-label="Our services, Our services" href="javascript:void(0);" 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>
<!-- QLD Multi-action card with image and tags -->
<div class="qld__card qld__card__multi-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 tags</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 tags -->
<ul class="qld__card__tags qld__tag-list">
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_1">Tag 1</a>
</li>
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_2">Tag 2</a>
</li>
<li>
<a class="qld__tag qld__tag--link" href="#?tag=tag_3">Tag 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Feature cards
A variant where the media sits on the right or left of the content. Feature cards are multiple interaction cards with the image aligned to the left or right. Feature cards are designed to promote content and use the most real estate on a screen. Feature cards can be used within sets of card groups to highlight the latest content or most important content. Feature cards have a different image layout when they span the full width of a container on desktop screens.
Vanilla example
Palette
Feature card example with left aligned image
The text used here is card description text. It should be no more than 2-3 lines long.
Feature card example with right aligned image
The text used here is card description text. It should be no more than 2-3 lines long.
<div class="row">
<div class="col-xs-12 qld__display-flex qld__flex-column qld__row-gap-component">
<!-- QLD Multi-action Feature card with left aligned image-->
<div class="qld__card qld__card__multi-action qld__card--image qld__card__multi-action--feature">
<!-- Image -->
<div class="qld__card__image-wrapper">
<div class="qld__responsive-media-img--bg" role="img" aria-label="A customer smiling at his two children" style="background-image: url('https://www.design-system.health.qld.gov.au/__data/assets/image/0017/110276/Hero-placeholder-Crop.jpg');">
</div>
</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="#">Feature card example with left aligned image</a>
</h3>
<!-- Card Description -->
<p id="Feature-description" 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">
<div class="qld__card__footer-inner">
<!-- Card Footer Links -->
<ul class="qld__link-list">
<li>
<a href="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" 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>
<!-- QLD Multi-action Feature card with right aligned image-->
<div class="qld__card qld__card__multi-action qld__card--image qld__card__multi-action--feature qld__card__multi-action--image-right">
<!-- Image -->
<div class="qld__card__image-wrapper">
<div class="qld__responsive-media-img--bg" role="img" aria-label="A customer smiling at his two children" style="background-image: url('https://www.design-system.health.qld.gov.au/__data/assets/image/0017/110276/Hero-placeholder-Crop.jpg');">
</div>
</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);">Feature card example with right aligned image</a>
</h3>
<!-- Card Description -->
<p id="Feature-description" 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">
<div class="qld__card__footer-inner">
<!-- Card Footer Links -->
<ul class="qld__link-list">
<li>
<a href="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" 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>
</div>
</div>
Usage guidelines
When to use
Use multi-action cards when a card contains multiple options or actions related to a single concept or task. However, it's important to keep in mind that too many links can be overwhelming and confusing for users, so it's important to design cards with a clear hierarchy of information and actions.
When not to use
- If there is only one action, use a single action card instead
- If you need to present the user with more then three actions or links
How to use
Do
- Display cards together in a grid or vertical list.
- 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 duplicate links to the same URL. For example, using the same URL for a card title and a ‘Read more’ link. Duplicating links is confusing and time wasting for users, who assume each link directs them to a different place. It’s also frustrating for people who use keyboard navigation with the additional and unnecessary tab stops ( Loranger, 2016).