Card

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


Card with mixed content
Development Guides

This is card content

Add anything here

Component Code
<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">
        <h4>This is card content</h4>
        <p>Add anything here</p>
        <button type="button" href="!#" class="sgds-button">A Button</button>
    </div>
</div>

When you should use this component

You should use the card component when you want to display groups of related content. E.g in a media page containing pdfs or news articles.

Titles and description of the card should be short and that tell the user exactly what the card contains when the user interacts with it. The card component should not be used to house long lines of text or long titles.

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.


Add headers for titles or footers for interactions

Header title text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, nulla.

Lorem ipsum

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">Lorem ipsum</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">
        <div class="sgds-card-footer-item">
            <span><a href="#!">View</a></span>
        </div>
        <div class="sgds-card-footer-item">
            <span><a href="#!">Share</a></span>
        </div>
    </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 color.


Feedback

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

Chat with the team