Card

Overview

The card is a flexible and extensible content container

It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options


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>

When you should use this component

You should use the card component when you want to display groups of related content. For example, enclose related images, links and text that represent an upcoming event in a card.

Keep headers and text within the the card short but descriptive. If the card is a link, the user should know what to expect when they click on it.

Do:

  • use headings that set clear expectations about their purpose.
  • contain prioritised content - cards are not meant for extensive reading.
  • avoid too many call-to-action buttons. There should be only one primary call-to-action per card.

When you should consider something else

Cards should not be used in complex pages as they may get mixed up with other visually prominent elements and may confuse users.

If there is a need to have many cards on a page, it should generally be contained in a section of the page. It should not be used to draw users' attention to important information.

If you require users to take note of important information, you may want to consider using the notification component with the correct color state or the callout component instead.


Grids, headers and footers

Cards can be used with grids and 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>

Interactive cards

For interactive cards with functionality similar to buttons or links, 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>

Media Cards

Media cards are graphical links that contain 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.


Feedback

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

Chat with the team