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.
<div class="hero">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white"
}
}
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-x19EW5Ptpf" 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"
}
]
}
}
Add video property to display a video as the background. Valid properties are described in video component.
<div class="hero hero--video">
<div class="hero__background">
<div class="video js-video hero__video">
<div class="video__holder">
<figure id="video__figure-9DADT3ZxZf" 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"video": {
"video": "https://vimeo.com/250078453",
"image": true,
"autoplay": true
}
}
}
Add titleColorClass or textColorClass property to specify the color of the title & text, color-green is used in this example as titleColorClass.
<div class="hero">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-green">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-green"
}
}
Optional text property to display text.
<div class="hero">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
<div class="hero__text color-white h3">VKG olulisemad aruanded – aastaaruanded, säästva arengu aruanded ja muud analüüsitööd.</div>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"text": "VKG olulisemad aruanded – aastaaruanded, säästva arengu aruanded ja muud analüüsitööd.",
"textColorClass": "color-white"
}
}
Text and title can also be displayed in a smaller font size. Set textSmall property true and element to h1..h5.
<div class="hero">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h2 class="hero__title h2 color-white">Eesti oma <br /> suurtööstus</h2>
<div class="hero__text color-white hero__text--small">VKG olulisemad aruanded – aastaaruanded, säästva arengu aruanded ja muud analüüsitööd.</div>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h2",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"textSmall": true,
"text": "VKG olulisemad aruanded – aastaaruanded, säästva arengu aruanded ja muud analüüsitööd.",
"textColorClass": "color-white"
}
}
Apply an overlay layer on top the background using overlay property. Define the color and opacity attributes inside the overlay object. Valid color values are described in typography component. The opacity attribute range is 0..1, where 0 is completely transparent, and 1 is a solid color. By default the opacity is 1.
<!-- Error rendering component: TypeError: Cannot read property 'indexOf' of undefined -->
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"overlay": {
"color": "color-green",
"opacity": ".5"
}
}
}
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.
<div class="hero">
<div class="hero__background">
<div class="image 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__overlay hero__overlay--gradient" style="background: linear-gradient(44.16deg, rgba(246, 139, 31, .5) 0%, rgba(255, 0, 0, 0) 100%); ">
</div>
</div>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"overlay": {
"gradient1": "246, 139, 31",
"opacity1": ".5",
"gradient2": "255, 0, 0",
"opacity2": "0"
}
}
}
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.
<div class="hero">
<div class="hero__background">
<div class="image 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__overlay hero__overlay--gradient" style="background: linear-gradient(44.16deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%); ">
</div>
</div>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"overlay": {
"gradient1": "#000000",
"opacity1": ".5",
"gradient2": "#000000",
"opacity2": "0"
}
}
}
Optionally press-from module can be included.
<div class="hero hero--press-form">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-10 grid__col--bottom-gutter-xs-4 grid__col--bottom-gutter-sm-2 grid__col--right-gutter-xs-1 grid__col--left-gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-green">Pressile</h1>
<div class="hero__text color-white hero__text--small">Tervitame avalikku huvi VKG tegevuse ja projektide vastu ning anname endast parima, et tagada info kättesaadavus ja läbipaistvus, kui see on äritegevuse seisukohalt võimalik. Siit lehelt saad tellida VKG uudiskirja, alla laadida fotosid
pildigaleriist ja tutvuda videotega.</div>
</div>
</div>
<div class="grid__col grid__col--xs-20 grid__col--lg-9 grid__col--left-gutter-xs-2 grid__col--left-gutter-lg-0 grid__col--lg-9">
<div class="press-form hero__press-form ">
<div class="press-form__inner">
<div class="press-form__form">
<div class="text color-black">
<h5 class="press-form__title">
<div class="image press-form__icon">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/img/vkg-tooohutus-simple.png" data-sizes="auto" alt="" class="image__img lazyload">
</div>
Ole kursis! Liitu pressilistiga
</h5>
</div>
<div class="press-form__fields">
<div class="textfield press-form__textfield">
<label class="textfield__label " for="name">
Sinu nimi:
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="name" name="" value="" placeholder="">
</div>
</div>
<div class="textfield press-form__textfield">
<label class="textfield__label " for="email">
Sinu e-post:
</label>
<div class="textfield__inner">
<input class="textfield__input" type="email" id="email" name="" value="" placeholder="">
</div>
</div>
</div>
<button type="button" class="button button--block press-form__button">
<span class="button__text">Liitu</span>
<span class="button__icon-container">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
</span>
</button>
<div class="press-form__foot-note text text--xsmall">
<p>Hindame sinu huvi meie toodete vastu ja täname, et külastad meie veebilehte. Soovime, et tunneksid end meie saidil ohutult ning kinnitame, et sinu isikuandmed on turvaliselt hoitud.<br/><a href='#'>Loe meie privaatsuseeskirju</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Pressile",
"titleColorClass": "color-green",
"textSmall": true,
"textColorClass": "color-white",
"text": "Tervitame avalikku huvi VKG tegevuse ja projektide vastu ning anname endast parima, et tagada info kättesaadavus ja läbipaistvus, kui see on äritegevuse seisukohalt võimalik. Siit lehelt saad tellida VKG uudiskirja, alla laadida fotosid pildigaleriist ja tutvuda videotega.",
"pressForm": {
"title": "Ole kursis! Liitu pressilistiga",
"icon": {
"srcset": "../../inc/img/vkg-tooohutus-simple.png"
},
"footNote": "Hindame sinu huvi meie toodete vastu ja täname, et külastad meie veebilehte. Soovime, et tunneksid end meie saidil ohutult ning kinnitame, et sinu isikuandmed on turvaliselt hoitud.<br/><a href='#'>Loe meie privaatsuseeskirju</a>",
"fields": [
{
"label": "Sinu nimi:",
"id": "name"
},
{
"label": "Sinu e-post:",
"id": "email",
"type": "email"
}
],
"button": {
"text": "Liitu"
}
}
}
}
Optionally pullBottom attribute can be added to make the next container overlap with hero.
<div class="hero pull-bottom--4">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Eesti oma <br /> suurtööstus</h1>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Eesti oma <br /> suurtööstus",
"titleColorClass": "color-white",
"pullBottom": 4
}
}
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.
<div class="hero">
<div class="hero__background">
<div class="image 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>
<div class="hero__inner h-container">
<div class="grid grid--top-xs grid--equalheight hero__grid">
<div class="grid__col
grid__col--xs-20 grid__col--lg-14 grid__col--gutter-xs-2
">
<div class="hero__text text">
<h1 class="hero__title h1 color-white">Meie teenused</h1>
<div class="hero__text color-white hero__text--medium">Kontserni tütarettevõtted osutavad laia valikut nutikaid tehnoloogilisi teenuseid tööstusautomaatikast tehnoloogia müügini.</div>
</div>
</div>
</div>
</div>
</div>
{
"language": "en-US",
"data": {
"element": "h1",
"component": "hero",
"title": "Meie teenused",
"titleColorClass": "color-white",
"text": "Kontserni tütarettevõtted osutavad laia valikut nutikaid tehnoloogilisi teenuseid tööstusautomaatikast tehnoloogia müügini.",
"textColorClass": "color-white",
"textMedium": true
}
}