UI MarCom

Cards Stable New variant

Cards are versatile containers for the compact presentation of content.

<uimc-card
>
</uimc-card>

AttributeDescriptionValuesDefault
urlAdd a hyperlink on the cardvalid URL
rimlessSets rimless card style
horizontalEnable a horizontal card layout
breakpointSets the breakpoint to apply horizontal layoutxs,sm,md,lg,xl
ratioControl how the space on the card is split up between image and content2x1,1x2,1x3

SlotSlotted content
defaultAll nested elements are shown as card content
card-imageSlot for an image wrapped with an <uimc-aspect-ratio>
card-footerSlot for elements that align to the bottom of the card

<uimc-covered-card
    title="Cards"
>
</uimc-covered-card>

AttributeDescriptionValuesDefault
urlHyperlink to the page that the card teasesvalid URL
titleSets the title text on the card
subtitlePuts an additional title above title text

SlotSlotted content
card-imageSlot for the cover image wrapped within an <uimc-aspect-ratio> to control the format of the card
card-labelPlace for an optional label in the up right corner

Card samples

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.

<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>
Basic card with an image and some text
Description of image content

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>
Add an url as a linked to create a teaser 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>
Looks like a panel with no image added
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.

<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>
Rimless card with no border and no inner padding

Horizontal cards

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

Description of image content

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>
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.

<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>
Inversed cards have their image on the right hand side
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.

<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>
Card with a fixed image width of 25%
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.

<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>
Card with a fixed image width of 33%
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.

<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>
Card with a fixed image width of 66%

Covered Card

Description of image content
<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>