No action
No action cards
No action cards are simple content containers designed to group similar content and assist the user to scan content on a page.
No action cards have no interactive elements and don't have shadows or hover states. No action cards can help to break up content on a page, this content should always be self contained.
No 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.
- Stacked icon: a variant where an icon is placed at the top of the card.
- Image card: a variant using an image.
Vanilla example
Default no action card
The text used here is card description text. It should be no more than 2-3 lines long.
No action with image
The text used here is card description text. It should be no more than 2-3 lines long.
No action with image and 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 No action vertical icon card -->
<div class="qld__card">
<!-- 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">
Default 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>
<div class="qld__card 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">No action card with stacked icon</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 No action leading icon card -->
<div class="qld__card 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">
No action with leading icon
</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 No action icon card -->
</div>
<div class="col-xs-12 col-md-6 qld__display-flex qld__flex-column qld__row-gap-component">
<!-- 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 with image
</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--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 with image and footer
</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>
No action cards guidelines
When to use
Use this style of cards if you want to share a discrete piece of information to your audience that doesn't include a link. For instance, you can use this style of card to share a quote, statistic, definition or visual aid.
When not to use
- For large sections of text
- To draw attention to text within content use a callout instead
- If your card contains a link or multiple links