Covid 19
opens in a new tabThe USP Carousel is designed to present and highlight the top benefits of the product. The user can click back and forth and gets the USPs presented.
The USP Carousel highlights the top advantages of the product and should convince the user to purchase the product.
- id: 333444
- text: Covid 19 Reiseabbruch Krankheit, Notfälle, Unfälle Carousel Item 4 This is Item 5 Carousel Item Number 6 Number Seven Carousel Item 8
- sling:resourceType: aida-component-library/core/components/content/uspcarousel
- displayMode: multi
- fragmentPath: /content/dam/aida-component-library/demo/fragments/carousel/usp-index
<div class="uspcarousel baseCfComponent contentfragment">
<div id="333444" class="uspcarousel cmp-contentfragment cmp-contentfragment--usp-index" data-cmp-contentfragment-model="aida-component-library/models/carousel" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-index">
<div class="cmp-uspcarousel flickity-enabled is-draggable" data-counter-label="of" tabindex="0" data-initialized="">
<div class="flickity-viewport" style="height: 572px;">
<div class="flickity-slider" style="transform: translateX(0%);">
<article id="1122334455" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/covid-191" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--covid-191 flickity-cell is-selected" style="transform: translateX(0%);">
<a href="/content/aida-component-library/library.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="Covid 19 Image Alt Text" title="Covid 19" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-covid?ts=1713869372262&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-covid.svg" id="image-5c1e9d5231" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-covid?ts=1713869372262&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="Covid 19 Image Alt Text">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Covid 19</p>
</a>
</article>
<article id="1122334466" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/covid-192" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--covid-192 flickity-cell" aria-hidden="true" style="transform: translateX(100%);">
<a href="/content/aida-component-library/library.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="Reiseabbruch Image Alt Text" title="Reiseabbruch" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-cancel?ts=1713869371247&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-cancel.svg" id="image-70bd94495f" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-cancel?ts=1713869371247&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="Reiseabbruch Image Alt Text">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Reiseabbruch</p>
</a>
</article>
<article id="1122334477" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/covid-19" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--covid-19 flickity-cell" aria-hidden="true" style="transform: translateX(200%);">
<a href="/content/aida-component-library/library.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="Krankheit, Notfälle, Unfälle Image Alt Text" title="Krankheit, Notfälle, Unfälle" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-emergency?ts=1713869386311&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-emergency.svg" id="image-6ea5ca1f36" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-emergency?ts=1713869386311&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="40" alt="Krankheit, Notfälle, Unfälle Image Alt Text">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Krankheit, Notfälle, Unfälle</p>
</a>
</article>
<article id="-9835876344" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/carousel-item-4" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--carousel-item-4 flickity-cell" aria-hidden="true" style="transform: translateX(300%);">
<a href="/content/aida-component-library/sample-pages/AIDA-43-CP-USP-carousel.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="This is the alt text" title="Carousel Item 4" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-1?ts=1713869472235&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-sample-1.svg" id="image-329cbdbdfd" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-1?ts=1713869472235&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="46" alt="This is the alt text">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Carousel Item 4</p>
</a>
</article>
<article id="-cda8ce3c60" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/item-5" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--item-5 flickity-cell" aria-hidden="true" style="transform: translateX(400%);">
<a href="/content/aida-component-library/sample-pages/AIDA-43-CP-USP-carousel.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="ALT Item 5" title="This is Item 5" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-2?ts=1713869480410&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-sample-2.svg" id="image-3ab88134b9" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-2?ts=1713869480410&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="ALT Item 5">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">This is Item 5</p>
</a>
</article>
<article id="-b9e2d87a50" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/this-is-no--6" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--this-is-no--6 flickity-cell" aria-hidden="true" style="transform: translateX(500%);">
<a href="/content/aida-component-library/sample-pages/AIDA-43-CP-USP-carousel.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="ALT Number 6" title="Carousel Item Number 6" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-3?ts=1713869376548&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-sample-3.svg" id="image-82718631ca" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-3?ts=1713869376548&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="47" alt="ALT Number 6">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Carousel Item Number 6</p>
</a>
</article>
<article id="-da80ac37ce" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/sample-item-7" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--sample-item-7 flickity-cell" aria-hidden="true" style="transform: translateX(600%);">
<a href="/content/aida-component-library/sample-pages/AIDA-43-CP-USP-carousel.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="ALT - 7" title="Number Seven" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-dmimage="" data-cmp-src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-4?ts=1713869460207&dpr=off&fit=constrain" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-sample-4.svg" id="image-99d7ee049f" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="https://s7e5a.scene7.com/is/content/aida/insurance-sample-4?ts=1713869460207&dpr=off&fit=constrain" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="ALT - 7">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Number Seven</p>
</a>
</article>
<article id="-2a042d77bb" data-cmp-contentfragment-model="aida-component-library/models/carousel-item" data-cmp-contentfragment-path="/content/dam/aida-component-library/demo/fragments/carousel/usp-items/carousel-item---8" class="cmp-uspcarousel__cell cmp-contentfragment cmp-contentfragment--carousel-item---8 flickity-cell" aria-hidden="true" style="transform: translateX(700%);">
<a href="/content/aida-component-library/sample-pages/AIDA-43-CP-USP-carousel.html" class="cmp-uspcarousel__cell-cta" data-cmp-clickable="" alt="ALT8" title="Carousel Item 8" target="_blank" data-tracking-initialized="">
<div class="cmp-uspcarousel__cell-image">
<div data-cmp-is="image" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-43-CP-USP-carousel/_jcr_content/root/responsivegrid/demo/component/uspcarousel.coreimg{.width}.svg/1657122525366/insurance-sample-5.svg" data-cmp-filereference="/content/dam/aida-component-library/icons/insurance-sample-5.svg" id="image-37ab425130" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/icons/insurance-sample-5.svg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="48" height="48" alt="ALT8">
</div>
</div>
<p class="cmp-uspcarousel__cell-label">Carousel Item 8</p>
</a>
</article>
</div>
</div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous" disabled="true"><svg class="flickity-button-icon" viewBox="0 0 100 100">
<title>Previous</title>
<path d="M 10, 50
L 60, 100
L 70, 90
L 30, 50
L 70, 10
L 60, 0
Z" class="arrow"></path>
</svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100">
<title>Next</title>
<path d="M 10, 50
L 60, 100
L 70, 90
L 30, 50
L 70, 10
L 60, 0
Z" class="arrow" transform="translate(100, 100) rotate(180)"></path>
</svg></button>
<div class="flickity-page-dots"><button type="button" class="flickity-page-dot is-selected" aria-current="step">View slide 1</button><button type="button" class="flickity-page-dot">View slide 2</button><button type="button" class="flickity-page-dot">View slide 3</button><button type="button" class="flickity-page-dot">View slide 4</button><button type="button" class="flickity-page-dot">View slide 5</button><button type="button" class="flickity-page-dot">View slide 6</button><button type="button" class="flickity-page-dot">View slide 7</button><button type="button" class="flickity-page-dot">View slide 8</button></div>
<div class="cmp-uspcarousel__items-count cmp-uspcarousel__items-count--eng"><span class="cmp-uspcarousel__items-count-current">1</span> of <span class="cmp-uspcarousel__items-count-total">8</span></div>
</div>
</div>
</div>
Built with Core Components 2.27.0opens in a new tab.