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>
Headline
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt officiis perferendis odit. Quidem iste reprehenderit, ab dolorem quis aliquid officia ratione aspernatur.
Rimless Card
No border to save some space
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate atque repudiandae corporis qui quibusdam deleniti.
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>Horizontal medium up
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, numquam! Magni non et, veniam repudiandae nam maiores.
Horizontal inversed
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui error nisi incidunt veritatis soluta beatae unde explicabo numquam.
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 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 2 fractions – body 1 fraction
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolorem quas vitae aut asperiores illum dignissimos id voluptatem libero.