Card Slider Stable

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>

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/version/3.1/assets/img/brandville/SH_MR_44431_18.jpg">
      </uimc-aspect-ratio>
    <h4 class="card__title">Card 1</h4>
    <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/version/3.1/assets/img/brandville/AT_ARTIS_pheno_with_Siemenstable_0050_IMAGE_18.jpg">
      </uimc-aspect-ratio>
    <h4 class="card__title">Card 2</h4>
    <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/version/3.1/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg">
      </uimc-aspect-ratio>
    <h4 class="card__title">Card 3</h4>
    <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/version/3.1/assets/img/brandville/SH_MR_44463_18.jpg">
      </uimc-aspect-ratio>
    <h4 class="card__title">Card 4</h4>
    <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/version/3.1/assets/img/brandville/CT_Somatom_go.Up_42238_IMAGE_Reflection.jpg">
      </uimc-aspect-ratio>
    <h4 class="card__title">Card 5</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quas modi id consectetur, adipisci reprehenderit.</p>
    </uimc-card>    
</uimc-card-slider>