2.2.1 molecules.cards.card-horizontal Card horizontal image placement

Toggle example guides Toggle HTML markup

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
Card image cap

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.
Card image cap

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.
Card image cap

Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Link
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-block ">
        <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 169