<aside class="large-image-w-cta">
<picture class="large-image-w-cta__image">
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
<div class="large-image-w-cta__content container">
<h2 class="large-image-w-cta__heading">Vivamus sagittis lacus vel augue laoreet</h2>
<div class="large-image-w-cta__copy rtf">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<a href="#" type="button" class="btn btn--primary">CTA Label</a>
</div>
</aside>
<aside class="large-image-w-cta">
{{#json image}}
{{>picture className="large-image-w-cta__image"}}
{{/json}}
<div class="large-image-w-cta__content container">
{{#if heading}}<h2 class="large-image-w-cta__heading">{{heading}}</h2>{{/if}}
{{#if copy}}
<div class="large-image-w-cta__copy rtf">
{{{copy}}}
</div>
{{/if}}
{{#if ctaLabel}}
<a href="#" type="button" class="btn btn--primary">{{ctaLabel}}</a>
{{/if}}
</div>
</aside>
{
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414",
"1279": "https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690"
},
"src": "https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700",
"description": "Image Description"
},
"heading": "Vivamus sagittis lacus vel augue laoreet",
"copy": "<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>",
"ctaLabel": "CTA Label"
}
@import '../theme', 'variables';
.large-image-w-cta {
margin-bottom: $large-image-w-cta-mobile-margin-bottom;
margin-top: $large-image-w-cta-mobile-margin-top;
position: relative;
@include mq(desktop) {
margin-bottom: $large-image-w-cta-desktop-margin-bottom;
margin-top: $large-image-w-cta-desktop-margin-top;
}
}
.large-image-w-cta__image {
display: block;
height: 0;
margin-bottom: 14px;
padding-bottom: 53.85%;
position: relative;
width: 100%;
img,
&:after {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
@include mq(tablet) {
margin-bottom: 30px;
}
@include mq(desktop) {
height: 700px;
margin-bottom: 0;
padding: 0;
&:after {
background-image: linear-gradient(to bottom, rgba($large-image-w-cta-overlay-color, 0) 30%, rgba($large-image-w-cta-overlay-color, 0.8) 80%);
content: "";
}
}
}
.large-image-w-cta__content {
color: $large-image-w-cta-mobile-text-color;
@include mq(desktop) {
align-items: flex-start;
color: $large-image-w-cta-desktop-text-color;
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
left: 0;
padding-bottom: 120px;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 1;
}
.btn {
margin-top: 20px;
width: 100%;
@include mq(tablet) {
margin-top: 40px;
width: auto;
}
}
}
.large-image-w-cta__heading {
font-family: $secondary-font;
font-size: 36px;
font-weight: 700;
line-height: 1.11;
margin: 0 0 5px;
@include mq(desktop) {
font-size: 48px;
line-height: 0.96;
margin-bottom: 10px;
}
}
$large-image-w-cta-mobile-margin-bottom: map-get($module-spacing, "mobile") !default;
$large-image-w-cta-mobile-margin-top: map-get($module-spacing, "mobile") !default;
$large-image-w-cta-desktop-margin-bottom: map-get($module-spacing, "desktop") !default;
$large-image-w-cta-desktop-margin-top: map-get($module-spacing, "desktop") !default;
$large-image-w-cta-overlay-color: #000 !default;
$large-image-w-cta-mobile-text-color: #000 !default;
$large-image-w-cta-desktop-text-color: #FFF !default;
Allow content authors to create a flexible, image-focused component to entice users to further explore the content of the website.
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import '../../node_modules/@verndale/front-end-components/lib/large-image-cta-row/styles';Copy and paste to your project the markup - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The module has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$large-image-w-cta-mobile-margin-bottom
$large-image-w-cta-mobile-margin-top
$large-image-w-cta-desktop-margin-bottom
$large-image-w-cta-desktop-margin-top
$large-image-w-cta-overlay-color
$large-image-w-cta-mobile-text-color
$large-image-w-cta-desktop-text-color
You always need to set your overrides before the import of you component - for example:
$large-image-w-cta-mobile-margin-bottom: 20px;
$large-image-w-cta-mobile-margin-top: 40px;
@import '../../node_modules/@verndale/front-end-components/lib/large-image-cta-row/styles';