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.
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"
}
}
}
}