Carousel
Carousel Single {% include 'components/carousel/carousel~single' %}
HTML
<div class="inner">
<div class="carousel carousel--single">
<div class="carousel__tiles">
<div class="carousel__tile">
<div class="carousel__tile--content">
<h2>It starts with a sewing machine <span>Dorcas' story</span></h2>
<a href="#" class="secondary-button desktop-only">Read more</a>
</div>
<div class="carousel__tile--image">
<picture class="parralax-up image-quote__image-">
<source media="(min-width: 647px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg">
<source media="(min-width: 375px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg" alt="">
<img src="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg" alt="">
</picture>
<a href="#" class="secondary-button mobile-only">Read more</a>
</div>
</div>
<div class="carousel__tile">
<div class="carousel__tile--content">
<h2>It starts with a tree <span>Dorcas' story</span></h2>
<a href="#" class="secondary-button desktop-only">Read more</a>
</div>
<div class="carousel__tile--image">
<picture class="parralax-up image-quote__image-">
<source media="(min-width: 647px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg">
<source media="(min-width: 375px)" srcset="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg" alt="">
<img src="/images/mainsite5/c19/hub/carousel/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg" alt="">
</picture>
<a href="#" class="secondary-button mobile-only">Read more</a>
</div>
</div>
<div class="carousel__tile">
<div class="carousel__tile--content">
<h2>It starts with a chicken <span>Joys story</span></h2>
<a href="#" class="secondary-button desktop-only">Read more</a>
</div>
<div class="carousel__tile--image">
<video autoplay="autoplay" muted loop>
<source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/mp4">
<source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/ogg">
<source src="/images/mainsite5/videos/mainsite5/ChickenVideo_Desktop_1080px-compress.mp4" type="video/webm">
Your browser does not support HTML5 video.
</video>
<a href="#" class="secondary-button mobile-only">Read more</a>
</div>
</div>
</div>
</div>
</div>
Twig
<div class="inner">
<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
<div class="carousel__tiles">
{% for item in carousel_items %}
<div class="carousel__tile">
{% if carousel_single %}
<div class="carousel__tile--content">
<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
<a href="#" class="secondary-button desktop-only">Read more</a>
</div>
<div class="carousel__tile--image">
{% if item.video %}
<video autoplay="autoplay" muted loop>
<source src="{{ item.video }}" type="video/mp4">
<source src="{{ item.video }}" type="video/ogg">
<source src="{{ item.video }}" type="video/webm">
Your browser does not support HTML5 video.
</video>
{% else %}
<picture class="parralax-up image-quote__image-{{ image.position }}">
<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
</picture>
{% endif %}
<a href="#" class="secondary-button mobile-only">Read more</a>
</div>
{% else %}
<!-- START CAROUSEL TILE CONTENT -->
<a href="{{ item.url }}" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">{{ item.title }}</h2>
<p>{{ item.summary }}</p>
<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>{
"carousel_items": {
"0": {
"title": "It starts with a sewing machine",
"read_more_text": "Read more",
"sub_title": "Dorcas' story",
"url": "#",
"desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg",
"mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Christopher_SewingMachine_Desktop.jpg"
},
"1": {
"title": "It starts with a tree",
"read_more_text": "Read more",
"sub_title": "Dorcas' story",
"url": "#",
"desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg",
"mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_RevEmmanuel_Sapling_Desktop.jpg"
},
"2": {
"title": "It starts with a chicken",
"read_more_text": "Read more",
"sub_title": "Joys story",
"url": "#",
"desktop_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Joy_Chicken_Desktop.jpg",
"mobile_image": "\/images\/mainsite5\/c19\/hub\/carousel\/Hub_ObjectCarousel_Joy_Chicken_Desktop.jpg",
"video": "\/images\/mainsite5\/videos\/mainsite5\/ChickenVideo_Desktop_1080px-compress.mp4"
}
},
"carousel_single": true
}
Carousel {% include 'components/carousel/carousel' %}
HTML
<div class="inner">
<div class="carousel ">
<div class="carousel__tiles">
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="http://placehold.it/400x300" alt="">
<img src="http://placehold.it/400x300" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p>A short summary text block goes in here to give more information about this section.</p>
<div class="hero-summary-link" href="#">See more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
</div>
</div>
</div>
Twig
<div class="inner">
<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
<div class="carousel__tiles">
{% for item in carousel_items %}
<div class="carousel__tile">
{% if carousel_single %}
<div class="carousel__tile--content">
<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
<a href="#" class="secondary-button desktop-only">Read more</a>
</div>
<div class="carousel__tile--image">
{% if item.video %}
<video autoplay="autoplay" muted loop>
<source src="{{ item.video }}" type="video/mp4">
<source src="{{ item.video }}" type="video/ogg">
<source src="{{ item.video }}" type="video/webm">
Your browser does not support HTML5 video.
</video>
{% else %}
<picture class="parralax-up image-quote__image-{{ image.position }}">
<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
</picture>
{% endif %}
<a href="#" class="secondary-button mobile-only">Read more</a>
</div>
{% else %}
<!-- START CAROUSEL TILE CONTENT -->
<a href="{{ item.url }}" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">{{ item.title }}</h2>
<p>{{ item.summary }}</p>
<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>{
"carousel_items": {
"0": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
},
"1": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
},
"2": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
},
"3": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
},
"4": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
},
"5": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
},
"6": {
"title": "Title",
"summary": "A short summary text block goes in here to give more information about this section.",
"read_more_text": "See more",
"url": "#",
"mobile_image": "http:\/\/placehold.it\/400x300",
"dekstop_image": "http:\/\/placehold.it\/400x300"
}
}
}Carousel Grey {% include 'components/carousel/carousel~grey' %}
HTML
<div class="inner">
<div class="carousel carousel--grey ">
<div class="carousel__tiles">
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="" alt="">
<img src="" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p></p>
<div class="hero-summary-link" href="#">Read more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="" alt="">
<img src="" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p></p>
<div class="hero-summary-link" href="#">Read more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
<div class="carousel__tile">
<!-- START CAROUSEL TILE CONTENT -->
<a href="#" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="">
<source media="(min-width: 375px)" srcset="" alt="">
<img src="" alt="">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">Title</h2>
<p></p>
<div class="hero-summary-link" href="#">Read more</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
</div>
</div>
</div>
</div>
Twig
<div class="inner">
<div class="carousel {% if carousel_colour %} {{ carousel_colour }} {% endif %} {% if carousel_single %} carousel--single{% endif %}">
<div class="carousel__tiles">
{% for item in carousel_items %}
<div class="carousel__tile">
{% if carousel_single %}
<div class="carousel__tile--content">
<h2>{{ item.title }} <span>{{ item.sub_title }}</span></h2>
<a href="#" class="secondary-button desktop-only">Read more</a>
</div>
<div class="carousel__tile--image">
{% if item.video %}
<video autoplay="autoplay" muted loop>
<source src="{{ item.video }}" type="video/mp4">
<source src="{{ item.video }}" type="video/ogg">
<source src="{{ item.video }}" type="video/webm">
Your browser does not support HTML5 video.
</video>
{% else %}
<picture class="parralax-up image-quote__image-{{ image.position }}">
<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
</picture>
{% endif %}
<a href="#" class="secondary-button mobile-only">Read more</a>
</div>
{% else %}
<!-- START CAROUSEL TILE CONTENT -->
<a href="{{ item.url }}" class="hero-summary">
<picture >
<source media="(min-width: 647px)" srcset="{{ item.desktop_image }}">
<source media="(min-width: 375px)" srcset="{{ item.mobile_image }}" alt="{{ image.alt }}">
<img src="{{ item.mobile_image }}" alt="{{ image.alt }}">
</picture>
<div class="hero-summary__card">
<h2 class="hero-summary-title">{{ item.title }}</h2>
<p>{{ item.summary }}</p>
<div class="hero-summary-link" href="{{ item.url }}">{{ item.read_more_text }}</div>
</div>
</a>
<!-- END CAROUSEL TILE CONTENT -->
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>{
"carousel_items": {
"0": {
"title": "Title",
"read_more_text": "Read more",
"url": "#",
"image": "\/images\/mainsite5\/c19\/TheBIggerPicture_Thumbnail_Mobile.jpg"
},
"1": {
"title": "Title",
"read_more_text": "Read more",
"url": "#",
"image": "\/images\/mainsite5\/c19\/MumtazAndBeenish_Thumbnail.jpg"
},
"2": {
"title": "Title",
"read_more_text": "Read more",
"url": "#",
"image": "\/images\/mainsite5\/c19\/MumtazAndBeenish_Thumbnail Copy.jpg"
}
},
"carousel_colour": "carousel--grey"
}