Cards Stable Dark theme
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 | – |
| reverse | Toggles the order of card body and image | – | – |
| theme | Set the color scheme of the component | light, dark | light |
| Slot | Slotted content |
|---|---|
| card-image | Slot for an image wrapped with an <uimc-aspect-ratio> |
| card-title | Slot for a headline on the card with proper margins |
| default | Nested elements are added as card content |
| 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 | String | – |
| subtitle | Puts an additional title above title text | String | – |
| 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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Headline</h5>
<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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Teaser</h5>
<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
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, eveniet provident animi ex pariatur doloremque vitae ea minima facilis.
<uimc-card url="#">
<h5 slot="card-title">Cards become panels</h5>
<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
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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Rimless Card</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate atque repudiandae corporis qui quibusdam deleniti.</p>
</uimc-card>Dark theme
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 url="#" theme="dark">
<uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
<img alt="Description of image content" src="/ui-marcom/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Headline</h5>
<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>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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Horizontal medium up</h5>
<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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Horizontal inversed</h5>
<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
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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Image 1 fraction – body 3 fractions</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, similique sapiente. Rem, quasi aperiam.</p>
</uimc-card>Image 1 fraction – body 2 fractions
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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Image 1 fraction – body 2 fractions</h5>
<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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
<h5 slot="card-title">Image 2 fractions – body 1 fraction</h5>
<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
Added in 3.1
<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/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
</uimc-aspect-ratio>
</uimc-covered-card>