Covid 19
opens in a new tab
USP Carousel
Description:
The 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.
Marketing purpose:
The USP Carousel highlights the top advantages of the product and should convince the user to purchase the product.
Example
- Properties
- Markup
- JSON
- 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: 537px;">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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.