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
Card title, clickable, icon suppressed
A short subline.
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
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. |