Card
Cards can be used for headers and footers, a wide variety of content, and contain contextual background colors and images.
General
Example
Base card
Last updated 3 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="card cgds">
<img class="card-img-top" alt="img alternate text goes here"
src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body">
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link" href="#">
<i class="bi bi-arrow-right-circle-fill"></i>
Go somewhere
</a>
</div>
</div>
Card with Call To Action (CTA)
Last updated 3 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="cgds-example-card-grid">
<div class="card cgds"><img class="card-img-top" alt="img alternate text goes here" src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body">
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h3 class="card-title" href="#">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link blog-btn" href="#">
<i class="bi bi-arrow-right-circle-fill"></i>
Go somewhere
</a>
</div>
</div>
<div class="card cgds">
<img class="card-img-top" alt="img alternate text goes here" src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body"><a class="card-link" href="#">
<h3 class="card-title">Card Title</h3>
</a>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
Informational card
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card cgds">
<img class="card-img-top" alt="img alternate text goes here"
src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Customise card sub-components' HTML Elements
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="cgds-example-card-grid">
<div class="card cgds">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<a class="card-text">Some quick example text to build on the card
title and make up the bulk of the card's content.</a>
</div>
</div>
<div class="card cgds">
<div class="card-body">
<h1 class="card-title">Card Title</h1><strong class="card-text">Some quick example text to build on the card
title and make up the bulk of the card's content.</strong>
</div>
</div>
</div>
Horizontal card
Last updated 3 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Last updated 3 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="cgds-example-card-grid">
<div class="card cgds" variant="card-horizontal">
<img class="card-img-left" src="/en/assets/img/component/card/image-in-horizontal-card.svg"/>
<div class="card-body">
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link blog-btn" href="#">
<i class="bi bi-arrow-right-circle-fill"></i>
Go somewhere
</a>
</div>
</div>
<div class="card cgds" variant="card-horizontal">
<img class="card-img-left" src="/en/assets/img/component/card/image-in-horizontal-card.svg"/>
<div class="card-body">
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link blog-btn" href="#">
<i class="bi bi-arrow-right-circle-fill"></i>
Go somewhere
</a>
</div>
</div>
</div>
Stretched link
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card cgds"><img class="card-img-top" alt="img alternate text goes here"
src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body"><a class="card-link stretched-link" href="#">
<h3 class="card-title">Card Title</h3>
</a>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Card group
Last updated 3 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Last updated 3 mins ago
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="cgds-example-card-grid">
<div class="card-group">
<div class="card cgds">
<img class="card-img-top" alt="img alternate text goes here"
src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body">
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link blog-btn" href="#">
<i class="bi bi-arrow-right-circle-fill"></i>
Go somewhere
</a>
</div>
</div>
<div class="card cgds">
<img class="card-img-top" alt="img alternate text goes here"
src="/en/assets/img/component/card/image-in-card.svg">
<div class="card-body">
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="card-link blog-btn" href="#">
<i class="bi bi-arrow-right-circle-fill"></i>
Go somewhere
</a>
</div>
</div>
</div>
</div>
Action card
Laptop
Apple
Macbook Pro M1
Laptop
Apple
Macbook Pro M1
Laptop
Apple
Macbook Pro M1
<div class="cgds-example-card-grid">
<div tabindex="0" variant="card-action" class="card cgds">
<div class="card-body">
<h6 class="text-muted card-subtitle">
<div><i class="bi bi-box"></i>Laptop</div>
<div class="card-input">
<div class="">
<input aria-label="selectablecard" type="checkbox" class="form-check-input">
<label title="" class="form-check-label"></label>
</div>
</div>
</h6>
<h5 class="card-title">Apple <i class="bi bi-apple"></i></h5>
<p class="card-text">Macbook Pro M1</p>
</div>
</div>
<div tabindex="0" variant="card-action" class="card cgds">
<div class="card-body">
<h6 class="text-muted card-subtitle">
<div><i class="bi bi-box"></i>Laptop</div>
<div class="card-input">
<div class="">
<input aria-label="selectablecard" type="radio" class="form-check-input">
<label title="" class="form-check-label"></label>
</div>
</div>
</h6>
<h5 class="card-title">Apple <i class="bi bi-apple"></i></h5>
<p class="card-text">Macbook Pro M1</p>
</div>
</div>
<div tabindex="0" variant="card-action" class="card cgds">
<div class="card-body">
<h6 class="text-muted card-subtitle">
<div><i class="bi bi-box"></i>Laptop</div>
<div class="card-input">
<div class="form-switch">
<input aria-label="selectablecard" type="checkbox" class="form-check-input">
<label title="" class="form-check-label"></label>
</div>
</div>
</h6>
<h5 class="card-title">Apple <i class="bi bi-apple"></i></h5>
<p class="card-text">Macbook Pro M1</p>
</div>
</div>
</div>
Quantity toggle card
Basket
Item Brand
Apple
<div variant="card-action-quantity-toggle" class="card cgds">
<div class="card-body">
<div>
<h4 class="card-title">Basket <i class="bi bi-cart"></i></h4>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<div>
<div class="card-unit">
<h5 class="text-muted card-subtitle">Item Brand</h5>
<h6 class="mt-2 card-subtitle">Apple</h6>
</div>
<label class="visually-hidden form-label">quantity-toggle</label>
<div variant="quantity-toggle" class="input-group input-group-sm cgds">
<button aria-label="minus-btn" type="button" class="btn btn-primary cgds"><i
class="bi bi-dash"></i></button>
<input aria-label="Quantity" name="quantity" min="0" type="number" class="text-center form-control"
value="0">
<button aria-label="plus-btn" type="button" class="btn btn-primary cgds"><i
class="bi bi-plus"></i></button>
</div>
</div>
</div>
</div>
Anatomy
Default card
- Image (situational): Gives context to the user as to what the card is about.
- Timestamp : Informs users about the freshness and credibility of the content presented in that card.
- Title: Serves to let the user know exactly what the card is about, ideal to keep this short and to the point.
- Description: Serves to give users information on the card.
- CTA (situational): When you need users to take an action, this can be omitted if the card is meant to display only information. A button can replace the text link if needed and if the situation calls for it.
Action card
- Icon: Gives more context to what the card is about.
- Selector: Allows users to select one or more cards.
Action card with quantity toggle
Used mainly for situations with subscriptions or when you require users to select an amount for a given item. This allows users to select an item and decide on the quantity they want.
- Quantity toggle: Allows users to select the amount they require.
- Price : Displays the amount of a single item. Can be used to show total based on amount selected. Pricing can be omitted if you do not require it.
Spacing
Default card
Within the default
Ensure that there is a min 24px spacing inside the card and 10px vertical spacing between content.
Action card
Within the action card
Ensure that there is a min 24px spacing inside the card and 16px vertical spacing between content.
Action card with quantity toggle
Within the action card with quantity toggle
Ensure that there is a min 24px spacing inside the card and 16px vertical spacing between content.
Usage guidelines
Cards should be used:
- When you need to display similar content and actions on a topic inside a container.
- When you need to visually separate specific parts of content in a view.
Cards should not be used:
- When you need to inform user about important changes. Use an alert component instead.
- If the information contained within the card is not related.
Usability guidelines
Keep card title brief and clear
Be brief and keep it to a single line by utilizing a sentence fragment.
Avoid using punctuation as much as possible.
Use consistent elements when cards are arranged in a group
For groups of cards, ensure the components used are consistent from card to card.
E.g., Use the same height and width for each card on the page.
Card content should be summarised and easy to digest
Don't overwhelm the space with excessive content.
The content should be easily accessed and explored so that
it is easier for users to find what they are interested in.
Card design tokens
$card-spacer-y: 1.5rem !default;
$card-spacer-x: 1.5rem !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
$card-border-color: $gray-400 !default;
$card-border-radius: $border-radius !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
//Action card specific
$card-transition-duration: 0.3s !default;
$card-transition-timing-function: ease-in-out !default;
$card-active-border: inset 0px 0px 0px 2.1px $link-color !default;