<div class="c-slide ">
<div class="c-slide__image-wrapper">
<img class="o-image" loading="lazy" src="../../images/slide-example.png" alt="Alt text here" />
</div>
<div class="c-slide__content-wrapper">
<div class="c-slide__label-wrapper">
<span class="c-slide__label o-detail--7">Featured</span>
</div>
<div class="c-slide__inner-wrapper">
<h3 class="o-heading c-slide__title o-heading--h3-primary">
[Title 50 Char] Lorem ipsum dolor sit vulputate
</h3>
<h3 class="o-heading c-slide__subhead o-heading--h3-secondary">
[Subhead] Lorem ipsum dolor sit amet consectetur.
</h3>
<p class="o-body o-body--p2 c-slide__description">
[Description Intro 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 ul...
</p>
<a class="o-button o-button--secondary c-slide__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>
{% set base_class = button.base_class|default('c-slide') %}
<div class="{{bem(base_class)}} {{slide.modifiers}}">
<div class="{{bem(base_class, 'image-wrapper')}}">
{# Slide Image #}
{% if slide.image.src %}
{% include "@responsive-image" with {
"image": {
"src": slide.image.src,
"alt": (slide.image.alt) ? slide.image.alt : ''
}
} %}
{% endif %}
</div>
<div class="{{bem(base_class, 'content-wrapper')}}">
{# Slide Label #}
{% if slide.label %}
<div class="{{bem(base_class, 'label-wrapper')}}">
<span class="{{bem(base_class, 'label')}} o-detail--7">{{slide.label}}</span>
</div>
{% endif %}
<div class="{{bem(base_class, 'inner-wrapper')}}">
{# Slide Title #}
{% if slide.title %}
{% include "@heading" with {
"heading": {
"level": "3",
"text": slide.title|truncate(50),
"extra": [bem(base_class, 'title'), "o-heading--h3-primary"]
}
} %}
{% endif %}
{# Slide Subhead #}
{% if slide.subhead %}
{% include "@heading" with {
"heading": {
"level": "3",
"text": slide.subhead,
"extra": [bem(base_class, 'subhead'), "o-heading--h3-secondary"]
}
} %}
{% endif %}
{# Slide Description #}
{% if slide.description %}
{% include "@body" with {
"body": {
"text": slide.description|truncate(300),
"modifiers": "p2",
"extra": [bem(base_class, 'description')]
}
} %}
{% endif %}
{# Slide CTA #}
{% if slide.cta and slide.cta.url %}
{% include "@button" with {
"button": {
"text": (slide.cta.text) ? slide.cta.text : "",
"url": slide.cta.url,
"target": (slide.cta.external) ? "_blank" : "",
"modifiers": "secondary",
"arrow": "true",
"external": (slide.cta.external) ? true : false,
"extra": [bem(base_class, 'button')]
}
} %}
{% endif %}
</div>
</div>
</div>
{
"slide": {
"image": {
"src": "../../images/slide-example.png",
"alt": "Alt text here"
},
"title": "[Title 50 Char] Lorem ipsum dolor sit vulputate",
"subhead": "[Subhead] Lorem ipsum dolor sit amet consectetur.",
"description": "[Description Intro 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.",
"cta": {
"text": "[Action Text]",
"url": "/"
},
"label": "Featured"
}
}
/* Slide */
.c-slide {
display: flex;
flex-flow: column nowrap;
gap: calc(var(--ds-space-xs) + var(--ds-space-xxs));
padding: var(--ds-space-sm);
@include media(">medium") {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
// Image
&__image-wrapper {
width: 100%;
@include media(">medium") {
grid-column: 1 / span 6;
}
}
// Content
&__content-wrapper {
display: flex;
gap: var(--ds-space-xs);
width: 100%;
@include media(">medium") {
grid-column: 7 / span 5;
}
}
&__inner-wrapper {
display: flex;
flex-flow: column nowrap;
gap: calc(var(--ds-space-xs) + var(--ds-space-xxs));
}
&__label {
display: flex;
align-items: center;
gap: var(--ds-space-xs);
width: fit-content;
padding: var(--ds-space-xxs);
writing-mode: vertical-rl;
&::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: currentColor;
border-radius: 50%;
}
&.external {
&::before {
content: url('data:image/svg+xml,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.09 0.5L2.53 0.5L2.53 2L13.97 2L0 15.97L1.06 17.03L15.03 3.06L15.03 14.5H16.53L16.53 1.94L15.09 0.5Z" fill="%23EB2A23"/></svg>');
display: inline-block;
width: 17px;
height: 17px;
background-color: transparent;
border-radius: 0;
}
}
}
&__description {
margin-top: 0;
}
&__button {
width: fit-content;
}
}
A basic slide for use in the featured slider