This layout uses the following components as "atoms" to create the full UI.
Uses: Components: Extends: Layouts:Using the hero, embed a Youtube, Vimeo or self hosted video on top of the hero media element.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<header class="c-hero c-hero--theatre c-hero--overlay">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/site/hero/standard/1-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/standard/1-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/standard/1-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/standard/1-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/standard/1-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/site/hero/standard/1-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/site/hero/standard/1-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</div>
<div class="c-hero__video">
<div class="c-video u-aspect--16x9">
<lite-vimeo class="u-w-100% u-h-100%" videoid="735700834"></lite-vimeo>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
<div class="c-hero__body">
<div class="c-hero__body-description">
<h1 class="c-hero-heading | u-heading u-kilo">Hero Title</h1>
<p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</header>