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

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

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

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

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

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

Element	Class	Description
`.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.