Cards Stable New variant
Cards are versatile containers for the compact presentation of content.
<uimc-card
>
</uimc-card>| Attribute | Description | Values | Default |
|---|---|---|---|
| url | Add a hyperlink on the card | valid URL | – |
| rimless | Sets rimless card style | – | – |
| horizontal | Enable a horizontal card layout | – | – |
| breakpoint | Sets the breakpoint to apply horizontal layout | xs,sm,md,lg,xl | – |
| ratio | Control how the space on the card is split up between image and content | 2x1,1x2,1x3 | – |
| Slot | Slotted content |
|---|---|
| default | All nested elements are shown as card content |
| card-image | Slot for an image wrapped with an <uimc-aspect-ratio> |
| card-footer | Slot for elements that align to the bottom of the card |
<uimc-covered-card
title="Cards"
>
</uimc-covered-card>| Attribute | Description | Values | Default |
|---|---|---|---|
| url | Hyperlink to the page that the card teases | valid URL | – |
| title | Sets the title text on the card | – | |
| subtitle | Puts an additional title above title text | – |
| Slot | Slotted content |
|---|---|
| card-image | Slot for the cover image wrapped within an <uimc-aspect-ratio> to control the format of the card |
| card-label | Place for an optional label in the up right corner |
Card samples
Headline
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt officiis perferendis odit. Quidem iste reprehenderit, ab dolorem quis aliquid officia ratione aspernatur.
<uimc-card
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<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>
</uimc-card>Teaser
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi libero quos, qui voluptate eligendi magni cum, provident dignissimos perspiciatis accusantium blanditiis.
<uimc-card
url="#"
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h4 class="card__title">Teaser</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi libero quos, qui voluptate eligendi magni cum, provident dignissimos perspiciatis accusantium blanditiis.</p>
</uimc-card>Cards become panels
Without an image
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, eveniet provident animi ex pariatur doloremque vitae ea minima facilis.
<uimc-card
url="#"
>
<h4 class="card__title">Cards become panels</h4>
<h6 class="card__subtitle">Without an image</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, eveniet provident animi ex pariatur doloremque vitae ea minima facilis.</p>
</uimc-card>Rimless Card
No border to save some space
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate atque repudiandae corporis qui quibusdam deleniti.
<uimc-card
rimless
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h4 class="card__title">Rimless Card</h4>
<h6 class="card__subtitle">No border to save some space</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate atque repudiandae corporis qui quibusdam deleniti.</p>
</uimc-card>Horizontal cards
Control Image position and size and sizes by adding proper class names.
Horizontal medium up
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, numquam! Magni non et, veniam repudiandae nam maiores.
<uimc-card
horizontal
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<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>
</uimc-card>Horizontal inversed
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui error nisi incidunt veritatis soluta beatae unde explicabo numquam.
<uimc-card
horizontal
reverse
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h4 class="card__title">Horizontal inversed</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui error nisi incidunt veritatis soluta beatae unde explicabo numquam.</p>
</uimc-card>Image 1 fraction – body 3 fractions
Responsive image aspect ratio
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, similique sapiente. Rem, quasi aperiam.
<uimc-card
horizontal
ratio="1x3"
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h4 class="card__title">Image 1 fraction – body 3 fractions</h4>
<h6 class="card__subtitle">Responsive image aspect ratio</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, similique sapiente. Rem, quasi aperiam.</p>
</uimc-card>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.
<uimc-card
horizontal
ratio="1x2"
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h4 class="card__title">Image 1 fraction – body 2 fractions</h4>
<h6 class="card__subtitle">Responsive image aspect ratio</h6>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem nemo illo quo facilis voluptatum dolor excepturi in voluptas.</p>
</uimc-card>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.
<uimc-card
horizontal
ratio="2x1"
>
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h4 class="card__title">Image 2 fractions – body 1 fraction</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolorem quas vitae aut asperiores illum dignissimos id voluptatem libero.</p>
</uimc-card>Covered Card
<uimc-covered-card
url="#"
subtitle="Covered Card"
title="The Covered Card achieves its premium look with an image as large as the card."
>
<uimc-aspect-ratio slot="card-image" formats='{"xs":"1x1", "md":"4x3", "xl":"16x9"}'>
<img alt="Description of image content" src="/ui-marcom/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
</uimc-covered-card>