Dependencies
This layout uses the following components as "atoms" to create the full UI.
Uses: Components: Extends: Layouts:Basic Example
Using the hero, embed a Youtube, Vimeo or self hosted video on top of the hero media element.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- News
- 5th August 2021
<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>
<div class="c-hero__menu">
<ul class="c-hero__menu-list | o-list-inline | u-align-middle u-gap-sm">
<li class="o-list__item">
<button class="c-btn c-btn--tertiary | u-round u-aspect" x-data x-tooltip.content="Share this post.">
<span class="u-hidden">Share:</span>
<svg class="c-icon | u-tc-primary" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-btn c-btn--tertiary | u-round u-aspect" x-data x-tooltip.content="Bookmark this page.">
<span class="u-hidden">Bookmark this page</span>
<svg class="c-icon | u-tc-primary" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 1.756h4.5a3 3 0 0 1 3 3V15L8 10.6 2.75 15V4.756a3 3 0 0 1 3-3Z"/>
</g>
</svg>
</button>
</li>
<li class="o-list__item">
<span class="c-badge c-badge--info">News</span>
</li>
<li class="o-list__item">
<svg class="c-icon | u-tc-primary u-mr-xs" viewBox="0 0 16 16" aria-hidden="true">
<defs>
<linearGradient id="a" x1="0%" x2="98.387%" y1="47.167%" y2="52.742%"><stop offset="0%" stop-color="#FFF" stop-opacity="0"/><stop offset="100%" stop-color="#3A82ED"/></linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#a)" d="M.71 2.73h10.559v2.514H.71z" transform="translate(2 1)"/>
<path stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v7.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 12.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
<path stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
<path stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
</g>
</svg>
<span class="u-fs-sm">5th August 2021</span>
</li>
</ul>
</div>
</header>With Call to Actions
Set some hero actions within the hero body next to the title and sub-title.
<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 class="c-hero__body-actions">
<a class="c-btn c-btn--primary" href="#btn_1">Button 1</a>
<a class="c-btn" href="#btn_2">Button 2</a>
</div>
</div>
<div class="c-hero__menu">
<ul class="c-hero__menu-list | o-list-inline | u-align-middle u-gap-sm">
<li class="o-list__item">
<button class="c-btn c-btn--tertiary | u-round u-aspect" x-data x-tooltip.content="Share this post.">
<span class="u-hidden">Share:</span>
<svg class="c-icon | u-tc-primary" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd" transform="rotate(90 8 8)">
<circle cx="4" cy="8" r="2" stroke-width="1.5"/>
<circle cx="12" cy="3" r="2" stroke-width="1.5"/>
<circle cx="12" cy="13" r="2" stroke-width="1.5"/>
<path stroke-linecap="round" stroke-width="1.5" d="m6 7 2.5-1.5m-1 5L10 12"/>
</g>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-btn c-btn--tertiary | u-round u-aspect" x-data x-tooltip.content="Bookmark this page.">
<span class="u-hidden">Bookmark this page</span>
<svg class="c-icon | u-tc-primary" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 1.756h4.5a3 3 0 0 1 3 3V15L8 10.6 2.75 15V4.756a3 3 0 0 1 3-3Z"/>
</g>
</svg>
</button>
</li>
<li class="o-list__item">
<span class="c-badge c-badge--info">News</span>
</li>
<li class="o-list__item">
<svg class="c-icon | u-tc-primary u-mr-xs" viewBox="0 0 16 16" aria-hidden="true">
<defs>
<linearGradient id="a" x1="0%" x2="98.387%" y1="47.167%" y2="52.742%"><stop offset="0%" stop-color="#FFF" stop-opacity="0"/><stop offset="100%" stop-color="#3A82ED"/></linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#a)" d="M.71 2.73h10.559v2.514H.71z" transform="translate(2 1)"/>
<path stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v7.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 12.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
<path stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
<path stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
</g>
</svg>
<span class="u-fs-sm">5th August 2021</span>
</li>
</ul>
</div>
</header>