Add title property to display a header. Optional property titleColorClass or textColorClass can be used to specify the color of title or text, where valid class names are described in typography component. Add image property to display a static single image.
Possibility to have images and/or video displayed as carousel content if multiple objects with image and/or video property wrapped inside slides array. Optionally add delay property to set the duration of each slide (default delay is 3500).
<div class="hero hero--slides">
<div class="hero__background">
<div class="hero__slide-list js-carousel">
<div class="hero__slide">
<div class="image image--fluid hero__image">
<picture class="image__picture">
<source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20384%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/768x384 768w 384h, //placehold.it/1536x768 1536w 768h, //placehold.it/1024x512 1024w 512h, //placehold.it/2048x1024 2048w 1024h, //placehold.it/800x400 800w 400h, //placehold.it/1600x800 1600w 800h, //placehold.it/1920x960 1920w 960h, //placehold.it/3840x1920 3840w 1920h, //placehold.it/400x200 400w 200h, //placehold.it/800x400 800w 400h"
media="(min-width: 600px)" />
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
data-sizes="auto" alt="" class="image__img lazyload">
</picture>
</div>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col grid__col--left-gutter-xs-2 grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2 grid__col--gutter-sm-1 grid__col--gutter-lg-2">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
<div class="hero__slide" data-delay="6000">
<div class="video js-video hero__video">
<div class="video__holder">
<figure id="video__figure-P3QEVqzeW1" class="video__figure" data-src="https://vimeo.com/250078453" data-autoplay="true">
<div class="video__inner">
<div id="video__video" class="video__video"></div>
</div>
</figure>
<div class="image image--fluid video__image">
<picture class="image__picture">
<source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20384%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/768x384 768w 384h, //placehold.it/1536x768 1536w 768h, //placehold.it/1024x512 1024w 512h, //placehold.it/2048x1024 2048w 1024h, //placehold.it/800x400 800w 400h, //placehold.it/1600x800 1600w 800h, //placehold.it/1920x960 1920w 960h, //placehold.it/3840x1920 3840w 1920h, //placehold.it/400x200 400w 200h, //placehold.it/800x400 800w 400h"
media="(min-width: 600px)" />
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
data-sizes="auto" alt="" class="image__img lazyload">
</picture>
</div>
</div>
</div>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col grid__col--left-gutter-xs-2 grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2 grid__col--gutter-sm-1 grid__col--gutter-lg-2">
<div class="hero__text text">
<h2 class="hero__title h1 color-orange">Teine banner <br /> sisaldab video</h2>
</div>
</div>
</div>
</div>
</div>
<div class="hero__slide">
<div class="image image--fluid hero__image">
<picture class="image__picture">
<source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20384%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/768x384 768w 384h, //placehold.it/1536x768 1536w 768h, //placehold.it/1024x512 1024w 512h, //placehold.it/2048x1024 2048w 1024h, //placehold.it/800x400 800w 400h, //placehold.it/1600x800 1600w 800h, //placehold.it/1920x960 1920w 960h, //placehold.it/3840x1920 3840w 1920h, //placehold.it/400x200 400w 200h, //placehold.it/800x400 800w 400h"
media="(min-width: 600px)" />
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
data-sizes="auto" alt="" class="image__img lazyload">
</picture>
</div>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col grid__col--left-gutter-xs-2 grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2 grid__col--gutter-sm-1 grid__col--gutter-lg-2">
<div class="hero__text text">
<h2 class="hero__title h1 ">Kolmas banneri <br /> pealkiri siin</h2>
</div>
</div>
</div>
</div>
</div>
<div class="hero__slide">
<div class="image image--fluid hero__image">
<picture class="image__picture">
<source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20384%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/768x384 768w 384h, //placehold.it/1536x768 1536w 768h, //placehold.it/1024x512 1024w 512h, //placehold.it/2048x1024 2048w 1024h, //placehold.it/800x400 800w 400h, //placehold.it/1600x800 1600w 800h, //placehold.it/1920x960 1920w 960h, //placehold.it/3840x1920 3840w 1920h, //placehold.it/400x200 400w 200h, //placehold.it/800x400 800w 400h"
media="(min-width: 600px)" />
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20320%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
data-sizes="auto" alt="" class="image__img lazyload">
</picture>
</div>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col grid__col--left-gutter-xs-2 grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2 grid__col--gutter-sm-1 grid__col--gutter-lg-2">
<div class="hero__text text">
<h2 class="hero__title h1 color-green">Neljas banneri <br /> pealkiri siin</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero__slide-progress">
<div class="hero__slide-percentage">
<div class="hero__slide-bar"></div>
</div>
<div class="hero__slide-percentage">
<div class="hero__slide-bar"></div>
</div>
<div class="hero__slide-percentage">
<div class="hero__slide-bar"></div>
</div>
<div class="hero__slide-percentage">
<div class="hero__slide-bar"></div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"slides": [
{
"image": true,
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white"
},
{
"image": null,
"video": {
"video": "https://vimeo.com/250078453",
"image": true,
"autoplay": true
},
"delay": "6000",
"title": "Teine banner <br /> sisaldab video",
"titleColorClass": "color-orange"
},
{
"image": true,
"title": "Kolmas banneri <br /> pealkiri siin"
},
{
"image": true,
"title": "Neljas banneri <br /> pealkiri siin",
"titleColorClass": "color-green"
}
]
}
}