Dependencies

This layout uses the following components as "atoms" to create the full UI.

Uses: Layouts:

Compact Hero

Components:

Compact Hero

A compact hero theme for an article cms page. Useful when only smaller images are available and cannot stretch the full width of a desktop browser. On article pages, heroes get a menu element underneath the media element, which contains extra meta data relevant to the page.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

<header class="c-hero c-hero--compact c-hero--overlay">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/1-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/1-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/1-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/1-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/1-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/1-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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

Add CTAs

Add call to actions within the hero menu on an article page. They are positioned below the hero as to not impede or clutter the main media element.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

<header class="c-hero c-hero--compact c-hero--overlay">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/2-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/2-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/2-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/2-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/2-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/1-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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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 class="c-hero__menu-actions | u-space-x-sm">
            <a class="c-btn c-btn--primary" href="#">Get in Touch</a>
            <a class="c-btn c-btn--secondary" href="#">Search</a>
        </div>
    </div>
</header>

Body Alignment

Set alignment for the body element. Mostly to allow customers to focus on a focal point within an image or media element without overlapping text.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

Hero Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.

<header class="c-hero c-hero--compact c-hero--overlay">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact c-hero--overlay c-hero--center">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact c-hero--overlay c-hero--right">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact 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/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact 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/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact c-hero--overlay c-hero--middle c-hero--left">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact c-hero--overlay c-hero--top c-hero--left">
    <div class="c-hero__media">
        <picture class="c-hero__picture">
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact 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/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

<header class="c-hero c-hero--compact 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/compact/3-hero-mobile.webp"
                    media="(max-width:414)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-mobile-lg.webp"
                    media="(min-width: 415px) and (max-width: 582px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet.webp"
                    media="(min-width: 583px) and (max-width: 834px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-tablet-lg.webp"
                    media="(min-width: 835px) and (max-width: 1024px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/3-hero-laptop.webp"
                    media="(min-width: 1025px) and (max-width: 1264px)"
                    type="image/webp"
            >
            <source srcset="/assets/img/ds/layouts/articles/hero/compact/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/compact/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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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>

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. Enim officiis neque consectetur.

<header class="c-hero c-hero--compact c-hero--overlay" data-hero>
    <div class="c-hero__media">
        <video class="c-hero__video | o-fit" poster="/assets/img/ds/layouts/articles/hero/compact/4-hero-poster.webp" preload="metadata" muted loop data-hero-video>
            <source data-src="/assets/video/ds/layouts/articles/hero/compact/xc90-hero-21x9.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-alpha">Hero Title</h1>
            <p class="c-hero-lead | u-lead u-gamma">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim officiis neque consectetur.</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="Bookmark this page.">
                    <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>

Article Compact Hero

Extending the principle compact hero, the article compact hero adds a page menu to the bottom to contain article content and call to actions.

Dependencies

Compact Hero

Hero Title

Add CTAs

Hero Title

Body Alignment

Hero Title

Hero Title

Hero Title

Hero Title

Hero Title

Hero Title

Hero Title

Hero Title

Hero Title

Adding Video

Hero Title

Useful notes and reading:

Related Components: