Basic Example

Basic example with media positioned on the left, and introductory text on the right.

Hero Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

With actions

Add a maximum of 2 call to actions within the hero body.

Hero Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button 1 Button 2

<div class="c-hero c-hero--horizontal">
    <div class="c-hero__media c-hero__media--overlay">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--mobile.webp"
                    media="(max-width: 414px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--tablet.webp"
                    media="(min-width: 582px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--laptop.webp"
                    media="(min-width: 1024px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_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/half/1-half_hero--mobile.webp" 
                 width="800" height="1024"
                 alt>
        </picture>
    </div>
    <div class="c-hero__body">
        <div class="c-hero__body-description">
            <h1 class="c-hero-heading | u-heading">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="#hero_button_1">Button 1</a>
            <a class="c-btn c-btn--secondary" href="#hero_button_2">Button 2</a>
        </div>
    </div>
</div>

Content Areas

Add a footer or header to either side in the "media" or "content" areas.

Header Area

Hero Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Footer Area

<div class="c-hero c-hero--horizontal">
    <div class="c-hero__media c-hero__media--overlay">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--mobile.webp"
                    media="(max-width: 414px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--tablet.webp"
                    media="(min-width: 582px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_hero--laptop.webp"
                    media="(min-width: 1024px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/site/hero/half/1-half_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/half/1-half_hero--mobile.webp" 
                 width="800" height="1024"
                 alt>
        </picture>
    </div>
    <div class="c-hero__body">
        <div class="c-hero__body-header">
            <p>Header Area</p>
        </div>
        <div class="c-hero__body-description">
            <h1 class="c-hero-heading | u-heading">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-footer">
            <p>Footer Area</p>
        </div>
    </div>
</div>

Adding Video

Add a background video clip as a media element instead of using an image.

Hero Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Horizontal Hero

Split the hero horizontally into half media, half introduction/content.

Dependencies

Basic Example

Hero Title

With actions

Hero Title

Content Areas

Hero Title

Adding Video

Hero Title