<link media="all" rel="stylesheet" href="/assets/themes/default/css/standard-featured-card.css?cb=">
<div class="standard-featured-card">
<div class="standard-featured-card__gallery">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">
<div class="gallery " data-module="gallery">
<div class="gallery__slides-container">
<div class="gallery__slides js-slides">
<div class="gallery__slide js-slide" data-type="image" data-slide-index="0">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=10" data-srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=10" data-srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="1">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
</div>
<span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
<div class="gallery__selection-label">
<span class="gallery__current-slide js-current-slide">1</span>
<span class="gallery__total-slides js-total-slides">2</span>
</div>
<span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
</div>
<div class="gallery__dots js-dots">
<span class="gallery__dot js-dot active" data-dot-index="0"></span>
<span class="gallery__dot js-dot " data-dot-index="1"></span>
</div>
</div>
</div>
<div class="standard-featured-card__details">
<p class="standard-featured-card__eyebrow">
Eyebrow
</p>
<p class="standard-featured-card__title">
Standard Featured Card
</p>
<p class="standard-featured-card__subline">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
<p class="standard-featured-card__cta-container">
<a href="#" data-module="cta" class="cta standard-featured-card__cta">
Click here
</a>
</p>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/standard-featured-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="standard-featured-card">
<div class="standard-featured-card__gallery">
{{> @gallery slides=gallery.slides firstInstance=gallery.firstInstance theme=theme hideThumbnails=true}}
</div>
<div class="standard-featured-card__details">
<p class="standard-featured-card__eyebrow">
{{eyebrow}}
</p>
<p class="standard-featured-card__title">
{{title}}
</p>
<p class="standard-featured-card__subline">
{{subline}}
</p>
{{#if cta}}
<p class="standard-featured-card__cta-container">
{{> @link url=cta.url text=cta.text cssClasses="standard-featured-card__cta" }}
</p>
{{/if}}
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"gallery": {
"firstInstance": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=10",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=10",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
}
]
},
"eyebrow": "Eyebrow",
"title": "Standard Featured Card",
"subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
"cta": {
"url": "#",
"text": "Click here"
}
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.standard-featured-card {
align-items: center;
background-color: $color-grey;
display: flex;
&__gallery {
width: 100%;
@include breakpoint(medium) {
width: 50%;
}
}
&__details {
padding: rem(20);
width: 100%;
@include breakpoint(medium) {
width: 50%;
}
}
&__eyebrow {
@extend %p--small;
@extend %spacer-small;
}
&__title {
@extend %heading02;
@extend %spacer-small;
}
&__subline {
@extend %p--lead;
@extend %spacer-small;
}
&__cta-container {
margin: 0 0 0 rem(18);
}
&__cta {
@extend %primary-cta;
}
}
No notes defined.