Card

Cards provide the possibility to display content composed of different elements.

To see a detailed explanation of all existing classes, please refer to the usage table below.

Card

Card title, not clickable

A short subline.

of cards Lorem ipsum dolor content of cards.

<div class="card">
    <div class="card__header">
        <h3 class="card__title">
            Card title, not clickable
        </h3>
        <p class="card__subline">
            A short subline.
        </p>
    </div>
    <div class="card__content">
        <p>of cards Lorem ipsum dolor content of cards.</p>
    </div>
</div>

Card centered

(Centered) Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.

of cards Lorem ipsum dolor content of cards.

<div class="card card--centered">
    <div class="card__header">
        <h3 class="card__title">
            <a href="#">(Centered) Card title</a>
        </h3>
        <p class="card__subline">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
        </p>
    </div>
    <div class="card__content">
        <p>of cards Lorem ipsum dolor content of cards.</p>
    </div>
</div>

Card clickable

Card title, clickable

A short subline.

of cards Lorem ipsum dolor content of cards.

<div class="card">
    <div class="card__header">
        <h3 class="card__title">
            <a href="#">Card title, clickable</a>
        </h3>
        <p class="card__subline">
            A short subline.
        </p>
    </div>
    <div class="card__content">
        <p>of cards Lorem ipsum dolor content of cards.</p>
    </div>
</div>

Card clickable, without link icon

of cards Lorem ipsum dolor content of cards.

<div class="card">
    <div class="card__header">
        <h3 class="card__title">
            <a href="#" class="link--noIcon">Card title, clickable, icon suppressed</a>
        </h3>
        <p class="card__subline">
            A short subline.
        </p>
    </div>
    <div class="card__content">
        <p>of cards Lorem ipsum dolor content of cards.</p>
    </div>
</div>

Card with menu

Card header with a very long title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.

of cards Lorem ipsum dolor content of cards.

<div class="card">
    <div class="card__header">

        <div class="menu is-right-aligned is-expanded">
            <button class="button button--ghost has-icon-only">
            </button>
            <div class="menu__items">
                <a class="menu__item" href="#">
                    Lorem ipsum
                </a>
                <a class="menu__item" href="#">
                    Lorem ipsum dolor sit amet
                </a>
                <a class="menu__item" href="#">
                    Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
                </a>
            </div>
        </div>

        <h3 class="card__title">
            Card header with a very long title
        </h3>
        <p class="card__subline">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
        </p>
    </div>
    <div class="card__content">
        <p>of cards Lorem ipsum dolor content of cards.</p>
    </div>
    <div class="card__footer">
        <a class="button button--secondary" href="#">Action 1</a>
        <a class="button button--secondary" href="#">Action 2</a>
        <a href="#" class="button button--secondary has-icon-only">
            <span class="iconMdsp edit" aria-hidden="true"></span>
        </a>
        <a href="#" class="button button--ghost has-icon-only">
            <span class="iconMdsp locationMarker" aria-hidden="true"></span>
        </a>
    </div>
</div>

Card with buttons in footer

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.

of cards Lorem ipsum dolor content of cards.

<div class="card">
    <div class="card__header">

        <h3 class="card__title">
            Card title
        </h3>
        <p class="card__subline">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
        </p>
    </div>
    <div class="card__content">
        <p>of cards Lorem ipsum dolor content of cards.</p>
    </div>
    <div class="card__footer">
        <a class="button button--secondary" href="#">Action 1</a>
        <a class="button button--secondary" href="#">Action 2</a>
        <a href="#" class="button button--secondary has-icon-only">
            <span class="iconMdsp edit" aria-hidden="true"></span>
        </a>
        <a href="#" class="button button--ghost has-icon-only">
            <span class="iconMdsp locationMarker" aria-hidden="true"></span>
        </a>
    </div>
</div>

Usage

ElementClassDescription
.card .card--centered Center-aligns all the content of the card horizontally: title, content and footer.
.card__title   If this element contains a link, e.g. <a href="...">...</a> the card is clickable as a whole; should only be used when there is only 1 action connected to a card.
.card__title a.link--noIcon Removes/Hides the default "in app" link icon next to a card's title.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top