Overview
Cards contain content and actions about a single subject.
It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Types
1) With mixed content
<div class="sgds-card">
<div class="sgds-card-image">
<figure class="sgds-image is-16by9">
<img alt="Development Guides" src="https://via.placeholder.com/160x90/868e96/ffffff?text=Image" />
</figure>
</div>
<div class="sgds-card-content">
<p><strong>About us</strong></p>
<p>A brief description of who we are</p>
<p>
<a href="#!">See more</a>
</p>
</div>
</div>2) Grids, Headers, and Footers
Cards can be used with grids - they can contain headers for titles or footers for interactions.
Header title text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, nulla.
Header title text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, nulla.
<div class="sgds-card">
<div class="sgds-card-header">
<p class="sgds-card-header-title">Header title text</p>
</div>
<div class="sgds-card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sequi, nulla.
</p>
</div>
<div class="sgds-card-footer">
<a href="#!" class="sgds-card-footer-item is-primary">View</a>
<a href="#!" class="sgds-card-footer-item is-link">Edit</a>
</div>
</div>
<div class="sgds-card">
<div class="sgds-card-header">
<p class="sgds-card-header-title">Header title text</p>
</div>
<div class="sgds-card-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sequi, nulla.
</p>
</div>
<div class="sgds-card-footer">
<a href="#!" class="sgds-card-footer-item is-success">Save</a>
<a href="#!" class="sgds-card-footer-item">Cancel</a>
</div>
</div>3) Interactive Cards
For interactive cards with functionality similar to buttons or links,
you can choose to add hover effects by using the
sgds-card sgds-card-button class.
<a href="#!">
<div class="sgds-card sgds-card-button">
<div class="sgds-card-image">
<figure class="sgds-image is-16by9">
<img alt="Development Guides" src="https://via.placeholder.com/160x90/868e96/ffffff?text=Image" />
</figure>
</div>
<div class="sgds-card-content">
<h5>Lorem ipsum</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sequi, nulla.
</p>
</div>
</div>
</a>4) Media Cards
Media cards are graphical links containing simple text content. Media cards have fixed height, and hence can be stacked together in a grid of columns and rows.
<a href="#!" class="is-media-card">
<div class="sgds-card">
<div class="sgds-card-content">
<header>
<div class="padding--bottom">Lorem ipsum</div>
<h5 class="has-text-weight-bold">
Lorem ipsum dolor sit amet.
</h5>
</header>
<footer>
<span>19 oct 2018</span>
<span class="sgds-icon sgds-icon-download is-size-6"></span>
</footer>
</div>
</div>
</a>5) Highlight Cards
Add .sgds-card-variant-highlight to the card element to highlight its prominence.
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, nulla.
<div class="sgds-card sgds-card-variant-highlight">
<div class="sgds-card-image">
<!-- You can change the css variable value for var(--sgds-card-variant-highlight-margin-top). The number should be half of the total height of the card image -->
<img src="https://via.placeholder.com/160x160" alt="">
</div>
<div class="sgds-card-content">
<h3>Title</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sequi, nulla.
</p>
</div>
<div class="sgds-card-footer">
<a href="#!" class="sgds-card-footer-item">View more</a>
</div>
</div>Style
| Modifier | Description |
|---|---|
| is-*color* |
Replace |
When to use
Cards should be used for:
- Displaying groups of related content.
- For example, enclose related images, links and text that represent an upcoming event in a card.
- Keep headers and text short but descriptive.
- Prioritise important content - cards are not meant for extensive reading.
- There should be only one primary call-to-action per card. Avoid excessive call-to-action buttons as it creates confusion.
- If there is a need to have many cards, it should generally be contained in a section of the page.
Cards should not be used for:
- Complex pages - cards will be mixed with other visually prominent elements and this may confuse users.
- Drawing users’ attention to important information - other options like the notification component with the correct colour state or the callout component are more suitable.
Can't find a component?
Let us know what you need and we’ll be happy to look into it