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

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

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>

Guidelines

Cards should:

  • 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

Style
Modifier Description
is-*colorState*

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