<section class="cta-row cta-row--with-background cta-row--with-image container" aria-labelledby="ctaRowTitle">
<div class="cta-row__inner">
<div class="cta-row__content">
<h2 class="cta-row__title" id="ctaRowTitle">Receive two rewards cards when you purchase gift cards!</h2>
<div class="cta-row__description rtf">
<p>Now through October 31, 2020. Promotion available online only. Reward card valid January 1 through May 31, 2021. Terms and conditions apply.</p>
</div>
<a href="#" class="btn btn--primary">
View all Promotions
</a>
</div>
<picture class="cta-row__image">
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=687&h=505">
<source media="(max-width: 1023px)" srcset="https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=943&h=693">
<img src="https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=380&h=280" alt="Image Description" loading="lazy">
</picture>
<picture class="cta-row__background">
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/kO1G3neRA2o?w=727&h=652">
<source media="(max-width: 1023px)" srcset="https://verndale-image-tools.herokuapp.com/id/kO1G3neRA2o?w=983&h=840">
<img src="https://verndale-image-tools.herokuapp.com/id/kO1G3neRA2o?w=1552&h=320" alt="Image Description" loading="lazy">
</picture>
</div>
</section>
<section class="cta-row{{#if backgroundImage}} cta-row--with-background{{/if}}{{#if image}} cta-row--with-image{{/if}} container" aria-labelledby="ctaRowTitle">
<div class="cta-row__inner">
<div class="cta-row__content">
<h2 class="cta-row__title" id="ctaRowTitle">{{title}}</h2>
{{#if description}}
<div class="cta-row__description rtf">
{{{description}}}
</div>
{{/if}}
{{>@button label=ctaLabel type="link" className="primary"}}
</div>
{{#if image}}
{{#json image}}
{{>picture className="cta-row__image"}}
{{/json}}
{{/if}}
{{#if backgroundImage}}
{{#json backgroundImage}}
{{>picture className="cta-row__background"}}
{{/json}}
{{/if}}
</div>
</section>
{
"title": "Receive two rewards cards when you purchase gift cards!",
"ctaLabel": "View all Promotions",
"description": "<p>Now through October 31, 2020. Promotion available online only. Reward card valid January 1 through May 31, 2021. Terms and conditions apply.</p>",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=687&h=505",
"1023": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=943&h=693"
},
"src": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=380&h=280",
"description": "Image Description"
},
"backgroundImage": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/id/kO1G3neRA2o?w=727&h=652",
"1023": "https://verndale-image-tools.herokuapp.com/id/kO1G3neRA2o?w=983&h=840"
},
"src": "https://verndale-image-tools.herokuapp.com/id/kO1G3neRA2o?w=1552&h=320",
"description": "Image Description"
}
}
@import '../theme', 'variables';
.cta-row {
margin: $module-spacing-mobile auto;
@include mq(desktop) {
margin: $module-spacing-desktop auto;
}
}
.cta-row__title {
font-family: $cta-row-title-font;
font-size: 30px;
font-weight: 700;
line-height: 1.13;
margin: 0 0 10px;
}
.cta-row__inner {
display: flex;
flex-direction: column-reverse;
position: relative;
padding: 20px;
z-index: 0;
border: 1px solid $no-background-border-color;
@include mq(tablet-landscape) {
align-items: center;
flex-direction: row;
}
@include mq(tablet-landscape) {
padding: 20px 20px 20px 59px;
}
.cta-row--with-background & {
border: 0;
}
.cta-row--with-image.cta-row--with-background & {
padding-top: 0;
@include mq(tablet-landscape) {
padding-top: 20px;
}
}
.btn {
margin-top: 10px;
@include mq(tablet-landscape) {
margin-top: 20px;
}
}
}
.cta-row__content {
flex-grow: 1;
}
.cta-row__image {
margin-bottom: 20px;
padding-bottom: 73.5%;
position: relative;
width: 100%;
@include mq(tablet-landscape) {
flex-shrink: 0;
height: 280px;
margin-bottom: 0;
margin-left: 52px;
padding: 0;
width: 380px;
}
img {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
}
}
.cta-row__background {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
@include mq(tablet-landscape) {
height: 100%;
top: 0;
}
.cta-row--with-image & {
height: calc(100% - 60px);
top: 60px;
@include mq(tablet-landscape) {
height: 100%;
top: 0;
}
}
img {
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
}
$module-spacing-mobile: 60px;
$module-spacing-desktop: 150px;
$cta-row-title-font: $primary-font !default;
$no-background-border-color: map-get($map: $theme-colors, $key: secondary-light-gray) !default;
This component contains a title, description, CTA and image. There are two different variations to this component. One is a background image only, and the other one will have the background image and the default image as well.
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/cta-row/styles';Copy and paste to your project any of the markup in the button variations - 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 cta-row 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
// Spacing for Mobile
$module-spacing-mobile
// Spacing for Desktop
$module-spacing-desktopYou always need to set your overrides before the import of you component - for example:
$module-spacing-mobile: 60px;
$module-spacing-desktop: 150px;
@import '../../node_modules/@verndale/front-end-components/lib/cta-row/styles';