Cards Stable

Cards are versatile containers for the compact presentation of content.

Card variations

<div class="card">
  <div class="card__image">
    <div class="aspect-ratio-16x9 aspect-ratio--cover">
      <img alt="Description of image content" src="/ui-marcom/version/2.4/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
    </div>
  </div>
<div class="card__body">
  <h4 class="card__title">Headline</h4>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt officiis perferendis odit. Quidem iste reprehenderit, ab dolorem quis aliquid officia ratione aspernatur.</p>
</div>
</div>
Description of image content

Headline

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt officiis perferendis odit. Quidem iste reprehenderit, ab dolorem quis aliquid officia ratione aspernatur.

Basic card with an image and some text
Becomes a linked teaser card by adding class `.card–-linked`
Looks like a panel with no `.card__image` element
Description of image content

Rimless Card

No border to save some space

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate atque repudiandae corporis qui quibusdam deleniti.

Rimless with no border and no inner padding by adding class `.card–-rimless`

Horizontal cards

Control Image position and size and sizes by adding proper class names.

<div class="card card--horizontal-md-up">
  <div class="card__image">
    <div class="aspect-ratio-16x9 aspect-ratio-md-3x4 aspect-ratio-lg-4x3 aspect-ratio-xl-16x9 aspect-ratio--cover">
      <img alt="Description of image content" src="/ui-marcom/version/2.4/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
    </div>
  </div>
<div class="card__body">
  <h4 class="card__title">Horizontal medium up</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, numquam! Magni non et, veniam repudiandae nam maiores.</p>
</div>
</div>
Description of image content

Horizontal medium up

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, numquam! Magni non et, veniam repudiandae nam maiores.

Image on the left side and flexible image width depending on content
Description of image content

Horizontal inversed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui error nisi incidunt veritatis soluta beatae unde explicabo numquam.

Image on the right side by adding class `.card–image-right`
Description of image content

Image 1 fraction – body 3 fractions

Responsive image aspect ratio

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, similique sapiente. Rem, quasi aperiam.

image set to 25% of card width by adding class `.card--1x3`
Description of image content

Image 1 fraction – body 2 fractions

Responsive image aspect ratio

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem nemo illo quo facilis voluptatum dolor excepturi in voluptas.

image set to 33% of card width by adding class `.card--1x2`
Description of image content

Image 2 fractions – body 1 fraction

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolorem quas vitae aut asperiores illum dignissimos id voluptatem libero.

image set to 66% of card width by adding class `.card--2x1`