3.4 atoms.card Card
The card is a very basic element that we see a lot in Open social.
It is the most basic way of structuring content into sections.
A card is elevated (through box-shadow property) one level from the canvas.
It will also have a background-color and border-radius.
Card title
A card can have a title to display what the card is about.
Add .card__title--underline for a border on the head.
Add a child <div class="card__subtitle"> for a subtitle.
Card block
The default way of structuring content in a card is by placing
it in a .card__block.
Card body
Add .card__body to double the padding of the card. This is
primarily used for articles.
Card actionbar
The actionbar is reserved for actions the user can perform in the card. In most cases there will be buttons, but there can also be badges in here.
Card title optional subtitle
Content can be anything
Card title optional subtitle
Content can be anything
Markup: 02-atoms/cards/card.twig
<section class="card">
<h2 class="card__title card__title--underline">
Card title
<span class="card__subtitle">
optional subtitle
</span>
</h2>
<div class="{{ modifier_class }}">
<p>Content can be anything</p>
</div>
<footer class="card__actionbar">
<a href="#" class="card__link"> Read more </a>
</footer>
</section>02-atoms/cards/cards.scss, line 1