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

Development Guides

About us

A brief description of who we are

See more

<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>

Style

Modifier Description
is-*color*

Replace colorState with contextual text color classes (is-danger, is-warning, is-success etc.) for various background colours.


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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team