Copy environment

Hero

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.

Overlay Gradient Hex Colors

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.

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