<section class="c-action-page-lead l-wrap l-container--full">
<div class="c-action-page-lead__container l-container" data-grid="grid">
<div class="c-action-page-lead__breadcrumbs" data-grid="6@md">
<nav role="navigation" class="c-breadcrumbs">
<span class="c-breadcrumbs__item">
<a class="o-link c-breadcrumbs__link" href="/" target="_self">
<span class="o-link__label">
§Page Title
</span>
</a>
<div class="c-breadcrumbs__divider">
|
</div>
</span>
<span class="c-breadcrumbs__item">
<a class="o-link c-breadcrumbs__link" href="/" target="_self">
<span class="o-link__label">
§Page Title
</span>
</a>
<div class="c-breadcrumbs__divider">
|
</div>
</span>
<span class="c-breadcrumbs__item">
<a class="o-link c-breadcrumbs__link" href="/" target="_self">
<span class="o-link__label">
§Page Title
</span>
</a>
<div class="c-breadcrumbs__divider">
|
</div>
</span>
<span class="c-breadcrumbs__item">
<a class="o-link c-breadcrumbs__link" href="/" target="_self">
<span class="o-link__label">
§Page Title
</span>
</a>
<div class="c-breadcrumbs__divider">
|
</div>
</span>
<span class="c-breadcrumbs__item">
<a class="o-link c-breadcrumbs__link" href="/" target="_self">
<span class="o-link__label">
§Page Title
</span>
</a>
</span>
</nav>
</div>
<h1 class="o-heading c-action-page-lead__title" data-grid="6@md">
[Custom Title 100 char] Lorem ipsum dolor sit amet consectetur. <span class='o-heading--h3-secondary-bold'>Nunc nunc placerat amet eros</span>
</h1>
<div class="o-dek c-action-page-lead__dek" data-grid="3@md offset-4@md">
[Optional Description Text ~200 Char] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="c-action-page-lead__button" data-grid="2@md">
<a class="o-button has-icon" href="/">
<span class="o-button__label">
Button
</span>
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</div>
<div class="c-tags c-action-page-lead__tags" data-grid="3@md offset-4@md">
<a href="/" class="o-tag">
Global Topic Text
</a>
<a href="/" class="o-tag">
Global Topic Text
</a>
<a href="/" class="o-tag">
Global Topic Text
</a>
<a href="/" class="o-tag">
Global Topic Text
</a>
<a href="/" class="o-tag">
Global Topic Text
</a>
</div>
<picture class="o-picture c-action-page-lead__image" data-grid="5@md offset-8@md">
<source media="(min-width: 480px)" srcset="https://picsum.photos/800/800">
<img class="o-image" loading="lazy" src="https://picsum.photos/500/500" alt="Image" />
</picture>
</div>
<div class="c-action-page-lead__grid l-wrap">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
{% set base_class = action_page_lead.base_class|default('c-action-page-lead') %}
{% if action_page_lead.heading %}
<section class="{{ bem(base_class, action_page_lead.element, action_page_lead.modifiers, action_page_lead.extra) }} l-wrap l-container--full" {{ attributes(action_page_lead.attributes) }}>
<div class="{{ bem(base_class, 'container') }} l-container" data-grid="grid">
<div class="{{ bem(base_class, 'breadcrumbs') }}" data-grid="6@md">
{% render "@breadcrumbs" with action_page_lead %}
</div>
{% include "@heading" with {
"heading": {
"level": "1",
"text": action_page_lead.heading,
"extra": bem(base_class, 'title'),
"attributes": {
"data-grid": "6@md"
}
}
} %}
{% include "@dek" with {
"dek": {
"text": action_page_lead.dek,
"extra": bem(base_class, 'dek'),
"attributes": {
"data-grid": action_page_lead.modifiers == "secondary" ? "6@md" : "3@md offset-4@md"
}
}
} %}
<div class="{{ bem(base_class, 'button') }}" data-grid="2@md">
{% include "@button" with action_page_lead %}
</div>
{% render "@tags" with {
"tags": {
"attributes": {
"data-grid": action_page_lead.modifiers == "secondary" ? "6@md" : "3@md offset-4@md"
},
"extra": bem(base_class, 'tags')
}
} %}
{% include "@responsive-image" with {
"picture": {
"attributes": {
"data-grid": "5@md offset-8@md"
},
"extra": bem(base_class, 'image')
},
"image": {
"sources": action_page_lead.image.sources,
"src": action_page_lead.image.src,
"alt": action_page_lead.image.alt
}
} %}
</div>
<div class="{{ bem(base_class, 'grid') }} l-wrap">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
{% endif %}
{
"action_page_lead": {
"heading": "[Custom Title 100 char] Lorem ipsum dolor sit amet consectetur. <span class='o-heading--h3-secondary-bold'>Nunc nunc placerat amet eros</span>",
"dek": "[Optional Description Text ~200 Char] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.",
"button": {
"url": "/",
"text": "Button",
"arrow": "true"
},
"image": {
"sources": [
{
"media": "(min-width: 480px)",
"srcset": "https://picsum.photos/800/800"
}
],
"src": "https://picsum.photos/500/500",
"alt": "Image"
}
}
}
/* ------------------------------------ *\
$ACTION-PAGE-LEAD
\* ------------------------------------ */
.c-action-page-lead {
position: relative;
background-color: var(--ds-color-background-primary);
padding-bottom: var(--ds-space);
overflow: hidden;
&__grid {
position: absolute;
z-index: 0;
pointer-events: none;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
transform: translate(-50%, -50%);
span {
height: 100%;
border-left: var(--ds-border-width) solid var(--ds-color-border-tertiary);
mix-blend-mode: multiply;
@include media("<=medium") {
&:nth-child(4),
&:nth-child(5),
&:nth-child(6),
&:nth-child(7),
&:nth-child(8),
&:nth-child(9),
&:nth-child(10),
&:nth-child(11),
&:nth-child(12) {
display: none;
}
}
}
}
&__container {
position: relative;
z-index: 1;
padding-left: var(--ds-space-xs);
padding-right: var(--ds-space-xs);
}
&__breadcrumbs {
grid-row: 1;
padding-top: var(--ds-space-xs);
@include media(">medium") {
align-content: flex-end;
padding-top: var(--ds-space-xl);
margin-bottom: var(--ds-space-xl);
}
}
&__title {
grid-row: 2;
justify-content: flex-end;
@include o-typography-heading--h3('primary');
.c-action-page-lead--secondary & {
@include o-typography-heading--h4('secondary', 'bold');
align-content: flex-end;
}
}
&__dek {
@include o-typography--p2('primary');
position: relative;
grid-row: 3;
padding-left: var(--ds-space-lg);
@include media(">medium") {
padding-left: 0;
margin-top: var(--ds-space);
margin-bottom: calc(var(--ds-space) * 2);
}
&::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: var(--ds-icon-md);
height: var(--ds-icon-md);
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy42NjEyIDE3Ljk2OTNMMTYuMjQ3NiAxOS40NjEzQzE2LjEzMDggMTkuNTg0NSAxNi4xMzA4IDE5Ljc4NDMgMTYuMjQ3NiAxOS45MDc2QzE2LjM2NDMgMjAuMDMwOCAxNi41NTM3IDIwLjAzMDggMTYuNjcwNCAxOS45MDc2TDE4LjU3MzIgMTcuODk5M0MxOC42OSAxNy43NzYgMTguNjkgMTcuNTc2MiAxOC41NzMyIDE3LjQ1M0wxNi42NzA0IDE1LjQ0NDdDMTYuNTUzNyAxNS4zMjE1IDE2LjM2NDMgMTUuMzIxNSAxNi4yNDc2IDE1LjQ0NDdDMTYuMTMwOCAxNS41NjggMTYuMTMwOCAxNS43Njc4IDE2LjI0NzYgMTUuODkxTDE3LjYxNDQgMTcuMzMzNkMxMi4wMTg0IDE2LjkyODUgNy41OTc5OSAxMi4wMDkxIDcuNTk3OTkgNkg3QzcgMTIuMzc0NSAxMS43MTI1IDE3LjU4NzQgMTcuNjYxMiAxNy45NjkzWiIgZmlsbD0iIzFGMUMwNiIvPgo8L3N2Zz4K');
background-position: center center;
background-repeat: no-repeat;
background-size: var(--ds-icon-md);
@include media(">medium") {
left: calc((var(--ds-icon-md) + var(--ds-space-xs)) * -1);
}
.c-action-page-lead--secondary & {
display: none;
}
}
.c-action-page-lead--secondary & {
@include o-typography--p1('primary');
padding-left: 0;
margin-top: calc($grid-gutter * -1);
}
}
&__button {
grid-row: 4;
.c-action-page-lead--secondary & {
display: none;
}
}
&__tags {
align-items: flex-end;
grid-row: 5;
@include media(">medium") {
grid-row: 4;
}
.c-action-page-lead--secondary & {
grid-row: 4;
}
}
&__image {
grid-row: 6;
position: relative;
img {
border-radius: var(--ds-border-radius);
object-fit: contain;
}
@include media(">medium") {
grid-row: 1 / span 4;
min-height: 450px;
img {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
}
@include media(">xxlarge") {
min-height: 650px;
}
.c-action-page-lead--secondary & {
grid-row: 5;
aspect-ratio: 1 / 1;
@include media(">medium") {
grid-row: 1 / span 4;
}
img {
transform: rotate(-2deg);
transform-origin: center center;
padding: var(--ds-space-lg);
border-radius: calc(var(--ds-border-radius) + var(--ds-space-lg));
@include media(">medium") {
padding: var(--ds-space-xxl);
border-radius: calc(var(--ds-border-radius) + var(--ds-space-xxl));
}
}
&::after {
content: '';
position: absolute;
top: 0;
left: 75%;
display: block;
width: 1px;
height: 100%;
background-color: var(--ds-color-background-secondary);
z-index: -1;
@include media(">medium") {
top: calc(50% * -1);
left: calc((100% / 12 * 5) - var(--ds-space-xxs));
height: 200%;
}
}
}
}
}
No notes defined.