Card Slider Stable Updated Dark theme

The Card Slider is a component for the presentation of multiple Cards aligned horizontally in one section.

<uimc-card-slider>
  <uimc-card>
  </uimc-card></uimc-card-slider>

Attribute	Description	Values	Default
config	Pass an object with various Glide.js options to diverge from standard.	valid config object	–
theme	Set the color scheme of the component	`light`, `dark`	`light`

Slot	Slotted content
default	Nest some of our Cards with similar content as slider items

Working sample

Card 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn.

Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sed sapiente possimus adipisci aspernatur explicabo.

Card 3

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis tempora ratione rem iustoe.

Card 4

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod debitis, corrupti expedita ullam odit obcaecati molestiae numquam atque.

Card 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas modi id consectetur, adipisci reprehenderit.

<uimc-card-slider>
  <uimc-card url="#">
    <uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
      <img alt="Description of image content" src="/ui-marcom/assets/img/brandville/SH_MR_44431_18.jpg">
    </uimc-aspect-ratio>
    <h5 slot="card-title">Card 1</h5>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn.</p>
  </uimc-card>  <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">Card 2</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sed sapiente possimus adipisci aspernatur explicabo.</p>
  </uimc-card>  <uimc-card url="#">
    <uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
      <img alt="Description of image content" src="/ui-marcom/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg">
    </uimc-aspect-ratio>
    <h5 slot="card-title">Card 3</h5>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis tempora ratione rem iustoe.</p>
  </uimc-card>  <uimc-card url="#">
    <uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
      <img alt="Description of image content" src="/ui-marcom/assets/img/brandville/SH_MR_44463_18.jpg">
    </uimc-aspect-ratio>
    <h5 slot="card-title">Card 4</h5>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod debitis, corrupti expedita ullam odit obcaecati molestiae numquam atque.</p>
  </uimc-card>  <uimc-card url="#">
    <uimc-aspect-ratio slot="card-image" formats='{"sm": "16x9"}'>
      <img alt="Description of image content" src="/ui-marcom/assets/img/brandville/CT_Somatom_go.Up_42238_IMAGE_Reflection.jpg">
    </uimc-aspect-ratio>
    <h5 slot="card-title">Card 5</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas modi id consectetur, adipisci reprehenderit.</p>
  </uimc-card></uimc-card-slider>

Dark theme