Dependencies
This layout uses the following components as "atoms" to create the full UI.
Extends: Layouts: Components:Basic Example
Use the entire device or browser width/height for maximising the impact the hero imagery can provide.
Hero Title
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--full c-hero--overlay c-hero--middle">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/1-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/1-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/1-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/1-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/1-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/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/articles/hero/full/1-hero-desktop.webp"
width="1620" height="1024"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header>With CTA
Add a call to action just below the title and/or description.
Hero Title
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--full c-hero--overlay c-hero--middle">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/2-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/2-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/2-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/2-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/2-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/2-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/2-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</div>
<div class="c-hero__body c-hero__body--vertical">
<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 c-btn--lg" href="#action1">Get in Touch</a>
</div>
<div class="c-hero__body-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header>Body Alignment
Align the body element allowing users to focus on a focal point from the media element, whether its a image or backgroud video clip.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hero Title
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--full c-hero--overlay">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--center">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--right">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--middle c-hero--right">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--middle c-hero--center">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--middle">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--top">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--top c-hero--center">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header><header class="c-hero c-hero--full c-hero--overlay c-hero--top c-hero--right">
<div class="c-hero__media">
<picture class="c-hero__picture">
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile.webp"
media="(max-width: 414px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-mobile-lg.webp"
media="(min-width: 415px) and (max-width: 582px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet.webp"
media="(min-width: 583px) and (max-width: 834px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-tablet-lg.webp"
media="(min-width: 835px) and (max-width: 1024px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-laptop.webp"
media="(min-width: 1025px) and (max-width: 1264px)" type="image/webp"
>
<source srcset="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
media="(min-width: 1265px)" type="image/webp"
>
<img class="c-hero__img c-img | o-fit"
src="/assets/img/ds/layouts/articles/hero/full/3-hero-desktop.webp"
width="1620" height="540"
alt
>
</picture>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header>Add Video
Use a video background clip within the media element, for a more impact heavy page introduction.
Hero Title
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--full c-hero--overlay c-hero--middle" data-hero>
<div class="c-hero__media">
<video class="c-hero__video | o-fit" poster="/assets/img/ds/layouts/articles/hero/full/4_hero-21x9__poster.webp" preload="metadata" muted loop data-hero-video>
<source data-src="/assets/video/ds/layouts/articles/hero/full/porsche-25yrs-video.mp4" type="video/mp4">
</video>
</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-arrow">
<a class="c-hero__arrow-link" href="#content">
<svg class="c-icon c-icon--lg | u-mr-sm" viewbox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path fill-rule="nonzero" d="m12 15.705 6-6.01-1.411-1.415L12 12.88l-4.588-4.6L6 9.694z"/>
</svg>
Read Article
</a>
</div>
</div>
</header>