2.2.1 molecules.cards.card-horizontal Singlecard: A card without a wrapper

Toggle example guides Toggle HTML markup

Makes it possible to render the content of a card without a wrapper. An image is placed next to the text. Only for tablet and bigger!

Examples
Default styling
header

With supporting text below as a natural lead-in to additional content.

.card-button
Changes the interaction when a card is clickable.
header

With supporting text below as a natural lead-in to additional content.

.bg-brand
Primary background color.
header

With supporting text below as a natural lead-in to additional content.

.bg-brand-light
Primary light background color.
header

With supporting text below as a natural lead-in to additional content.

.bg-azure
Azure background color
header

With supporting text below as a natural lead-in to additional content.

.bg-azure-lightest
Azure light background color
header

With supporting text below as a natural lead-in to additional content.

.bg-dark-blue
Dark blue background color
header

With supporting text below as a natural lead-in to additional content.

.bg-dark-blue-lightest
Dark blue light background color
header

With supporting text below as a natural lead-in to additional content.

.bg-gray
Gray background color
header

With supporting text below as a natural lead-in to additional content.

.bg-gray-lightest
Gray light background color
header

With supporting text below as a natural lead-in to additional content.

.bg-white
White background color
header

With supporting text below as a natural lead-in to additional content.

Markup: components/molecules/cards/singlecard.twig
<div class="container container-spacer singlecard">

    <div class="card  [modifier class]">
        <div class="card-header">header</div>      <div class="card-content">
    <div class="card-media"><img src="kss-assets/img/placeholder_1.jpg" ></div>
    <div class="card-block">
              <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          </div>
  </div>
    
    </div>
  
</div>
Source: components/molecules/cards/_cards.scss, line 193