2.2.1 molecules.cards.card-horizontal Card horizontal image placement
Makes it possible to render the content of a card horizontal. An image is placed next to the text. Only for tablet and bigger!
Examples
Default styling
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Link
.card-primary
Card primary.
Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Link
.card-button
Changes the interaction when a card is clickable.
Markup: components/molecules/cards/cards-horizontal.twig
<div class="col-sm-6">
<div class="card card-horizontal [modifier class]">
<img class="[modifier class]" src="http://placehold.it/400x200" alt="Card image cap ">
<div class="card-body ">
<h4 class="card-title ">Title</h4>
<p class="card-text ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="# " class="card-link ">Link</a>
</div>
</div>
</div>
Source:
components/molecules/cards/_cards.scss
, line 138