<section class="content-carousel" data-module="contentCarousel">
<div class="content-carousel__header">
<div class="container">
<p class="content-carousel__definition">Lorem ipsum dolor sit amet</p>
<h2 class="content-carousel__title">Lorem ipsum dolor sit amet</h2>
</div>
</div>
<div class="content-carousel__container">
<div class="container">
<div class="content-carousel__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="large-image-card">
<a class="large-image-card__link" href="/">
<img src="https://via.placeholder.com/883x890" alt="Image descriptionLorem ipsum dolor sit amet" class="img--cover lazyload">
<div class="large-image-card__content">
<h3 class="large-image-card__title">Lorem ipsum dolor sit amet</h3>
<p class="large-image-card__description">Lorem ipsum dolor sit amet</p>
</div>
</a>
</article>
</div>
<div class="swiper-slide">
<article class="large-image-card">
<a class="large-image-card__link" href="/">
<img src="https://via.placeholder.com/883x890" alt="Image descriptionLorem ipsum dolor sit amet" class="img--cover lazyload">
<div class="large-image-card__content">
<h3 class="large-image-card__title">Lorem ipsum dolor sit amet</h3>
</div>
</a>
</article>
</div>
<div class="swiper-slide">
<article class="large-image-card">
<img src="https://via.placeholder.com/883x890" alt="Image descriptionLorem ipsum dolor sit amet" class="img--cover lazyload">
<div class="large-image-card__content">
<h3 class="large-image-card__title">Lorem ipsum dolor sit amet</h3>
<p class="large-image-card__description">Lorem ipsum dolor sit amet</p>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="large-image-card">
<img src="https://via.placeholder.com/883x890" alt="Image descriptionLorem ipsum dolor sit amet" class="img--cover lazyload">
<div class="large-image-card__content">
<h3 class="large-image-card__title">Lorem ipsum dolor sit amet</h3>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-carousel__buttons container">
<button type="button" aria-label="Previous Slide" class="content-carousel__button content-carousel__button-prev">
<span>
<svg viewBox="0 0 6 12" class="link__icon link__icon--left">
<use xlink:href="#chevron-left" />
</svg>
</span>
</button>
<button type="button" aria-label="Next Slide" class="content-carousel__button content-carousel__button-next">
<span>
<svg viewBox="0 0 6 12" class="link__icon link__icon--right">
<use xlink:href="#chevron-right" />
</svg>
</span>
</button>
</div>
</section>
<section class="content-carousel" data-module="contentCarousel">
<div class="content-carousel__header">
<div class="container">
{{#if definition}}
<p class="content-carousel__definition">{{definition}}</p>
{{/if}}
<h2 class="content-carousel__title">{{title}}</h2>
</div>
</div>
<div class="content-carousel__container">
<div class="container">
<div class="content-carousel__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#json slides}}
{{#each this}}
<div class="swiper-slide">
{{>@large-image-card}}
</div>
{{/each}}
{{/json}}
</div>
</div>
</div>
</div>
</div>
<div class="content-carousel__buttons container">
<button type="button" aria-label="{{previousSlideLabel}}"
class="content-carousel__button content-carousel__button-prev">
<span>
{{>svg name="chevron-left" className="link__icon link__icon--left" viewBox="0 0 6 12"}}
</span>
</button>
<button type="button" aria-label="{{nextSlideLabel}}"
class="content-carousel__button content-carousel__button-next">
<span>
{{>svg name="chevron-right" className="link__icon link__icon--right" viewBox="0 0 6 12"}}
</span>
</button>
</div>
</section>
{
"definition": "Lorem ipsum dolor sit amet",
"title": "Lorem ipsum dolor sit amet",
"slides": [
{
"image": "https://via.placeholder.com/883x890",
"imageDescription": "Image descriptionLorem ipsum dolor sit amet",
"title": "Lorem ipsum dolor sit amet",
"description": "Lorem ipsum dolor sit amet",
"link": "/"
},
{
"image": "https://via.placeholder.com/883x890",
"imageDescription": "Image descriptionLorem ipsum dolor sit amet",
"title": "Lorem ipsum dolor sit amet",
"description": null,
"link": "/"
},
{
"image": "https://via.placeholder.com/883x890",
"imageDescription": "Image descriptionLorem ipsum dolor sit amet",
"title": "Lorem ipsum dolor sit amet",
"description": "Lorem ipsum dolor sit amet",
"link": null
},
{
"image": "https://via.placeholder.com/883x890",
"imageDescription": "Image descriptionLorem ipsum dolor sit amet",
"title": "Lorem ipsum dolor sit amet",
"description": null,
"link": null
}
],
"previousSlideLabel": "Previous Slide",
"nextSlideLabel": "Next Slide"
}
This component is a carousel of large image cards
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import "../../node_modules/@verndale/front-end-components/lib/content-carousel/large-image-card/styles";
@import "../../node_modules/@verndale/front-end-components/lib/content-carousel/styles"Copy and paste to your project any of the markup in the content card variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The content card has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$main-color
$gray
$white
$black