Documentation for basic card components, card headers and footers.
Files
app/styles/modules/_cards.scss
Card
A card serves as an entry point to more detailed information. Cards may contain a photo, text, link, list, tables and any other conten. The most basic card can be created by using class .card
on element that wraps our content. Content should be then wrapped in element with class .card__content
. One card can contain more .card__content
elements.
Note
More complex cards can contain also headers and footers.
Basic card
Lorem ipsum Ullamco ut dolore laborum deserunt Excepteur veniam et Duis nostrud cupidatat dolore qui voluptate et non ex laboris ullamco consequat culpa consequat qui magna qui labore dolore do velit sint.
Card with two contents.
Lorem ipsum Ullamco ut dolore laborum deserunt Excepteur veniam et.
Duis nostrud cupidatat dolore qui voluptate et non ex laboris ullamco consequat culpa consequat qui magna qui labore dolore do velit sint.
<!-- basic card -->
<article class="card">
<section class="card__content">
...
</section>
</article>
<!-- card with two contents-->
<article class="card">
<section class="card__content">
...
</section>
<section class="card__content">
...
</section>
</article>
Card header
Card header is part of the card component. It can be created by using class .card__header
on header element.
Card with header
Lorem ipsum Ea cillum deserunt do ut eiusmod reprehenderit minim et reprehenderit ea in dolor veniam dolor incididunt dolore dolor fugiat consequat ea qui exercitation proident amet aute id aute culpa esse elit dolor labore voluptate in cillum Ut dolor mollit ad.
<article class="card">
<header class="card__header">
...
</header>
<section class="card__content">
...
</section>
</article>
Header actions
Card header can also contain actions. In that case use .card__header__action
and .card__header__title
. Actions can contain icons, buttons, dropdowns... You name it!
Note
Headline
Lorem ipsum Ea cillum deserunt do ut eiusmod reprehenderit minim et reprehenderit ea in dolor veniam dolor incididunt dolore dolor fugiat consequat ea qui exercitation proident amet aute id aute culpa esse elit dolor labore voluptate in cillum Ut dolor mollit ad.
<article class="card">
<header class="card__header">
<div class="card__header__action">
...
</div>
<div class="card__header__title">
...
</div>
<div class="card__header__action">
...
</div>
</header>
<section class="card__content">
...
</section>
</article>