<section class="c-section-text
l-wrap l-container--full
" data-texture="question-mark">
<div class="c-section-text__container l-container">
<span class="o-kicker c-section-text__kicker">
Section Heading
</span>
<div class="c-section-text__content u-align--left u-spacing">
<div class="c-section-text__main l-container--lg u-align--left">
<h2 class="o-heading o-heading--h1-secondary-bold c-section-text__title">
[§Section Heading] 3 Styles: (1) Lorem ipsum dolor sit amet consectetur. <span class='o-heading--h1-primary'>(2) Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu.</span> <span class='o-heading--h1-secondary'>(3)Tellus eleifend lobortis pharetra sed.</span>
</h2>
<div class="l-container--xs u-align--left">
<p class="o-body o-body--p1-secondary c-section-text__body">
[Body Text 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.
</p>
<a class="o-button o-button--secondary c-section-text__button has-icon" href="/">
<span class="o-button__label">
Action Text
</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>
</div>
</div>
</section>
{% set base_class = feature.base_class|default('c-section-text') %}
{% if feature.label %}
<section class="{{ bem(base_class, feature.element, feature.modifiers, feature.extra) }}
l-wrap l-container--full
{% if ticker_tape %}has-ticker-tape{% endif %}"
{% if texture %}data-texture="{{ texture }}"{% endif %}
{{ attributes(feature.attributes) }}>
<div class="{{ bem(base_class, 'container') }} l-container">
{% include "@kicker" with {
"kicker": {
"text": feature.label,
"extra": bem(base_class, 'kicker')
}
} %}
<div class="{{ bem(base_class, 'content') }} u-align--left u-spacing">
<div class="{{ bem(base_class, 'main') }} l-container--lg u-align--left">
{% include "@heading" with {
"heading": {
"level": "2",
"size": "h1-secondary-bold",
"text": feature.heading_rich_text,
"extra": bem(base_class, 'title')
}
} %}
<div class="l-container--xs u-align--left">
{% include "@body" with {
"body": {
"text": feature.body_text,
"modifiers": "p1-secondary",
"extra": bem(base_class, 'body')
}
} %}
{% include "@button" with {
"button": {
"modifiers": "secondary",
"arrow": true,
"url": feature.action.url,
"text": feature.action.text,
"target": feature.action.target,
"extra": bem(base_class, 'button')
}
} %}
</div>
</div>
{% if aside %}
{% include "@aside" with {
"aside": {
"image": aside.image,
"heading": aside.heading,
"body": aside.body,
"action": aside.action,
"extra": bem(base_class, 'aside')
}
} %}
{% endif %}
</div>
{% if ticker_tape %}
{% include "@ticker-tape" with {
"ticker_tape": {
"text": ticker_tape,
"extra": bem(base_class, 'ticker-tape')
}
} %}
{% endif %}
</div>
</section>
{% endif %}
{
"feature": {
"label": "Section Heading",
"heading_rich_text": "[§Section Heading] 3 Styles: (1) Lorem ipsum dolor sit amet consectetur. <span class='o-heading--h1-primary'>(2) Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu.</span> <span class='o-heading--h1-secondary'>(3)Tellus eleifend lobortis pharetra sed.</span>",
"body_text": "[Body Text 300 Char] Lorem ipsum dolor sit amet consectetur. Ut lectus eu vulputate senectus tortor hac nulla. Et semper et fermentum ut fusce enim ultricies magna arcu. Tellus eleifend lobortis pharetra sed. Quis erat facilisis vestibulum imperdiet tempor sit tortor. Non integer maecenas ullamcorper gravida consectetur.",
"action": {
"url": "/",
"text": "Action Text"
}
},
"texture": "question-mark"
}
/* ------------------------------------ *\
$SECTION-TEXT
\* ------------------------------------ */
.c-section-text {
color: var(--ds-color-theme-content-primary);
overflow: hidden;
padding-block: 0;
&__container {
position: static;
margin-block: var(--ds-space-xl);
}
&__title {
max-width: 30em;
text-wrap: balance;
}
&__content {
margin-top: var(--ds-space-xl);
}
&__body,
&__button {
margin-top: var(--ds-space);
}
&__aside {
margin-left: auto;
}
.l-content {
position: static;
}
&__ticker-tape {
display: flex;
position: absolute;
top: var(--ds-space-xl);
left: calc(var(--ds-space) * -1);
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
width: 9999vh; // ensure tape spans full height in landscape orientation
}
@include media('>=large') {
padding-left: calc(2 * var(--ds-space-md));
&__content {
margin-block: var(--ds-space-xxxl);
}
&__ticker-tape {
left: 0;
}
}
@include media('>=xlarge') {
&__content {
display: flex;
gap: var(--ds-space);
}
&__main {
flex-shrink: 1;
}
}
@include media('>=xxlarge') {
padding-left: calc(var(--ds-space-md) + var(--ds-space-xxl));
}
}
No notes defined.