<article class="s-curve-card">
<div class="s-curve-card__media">
<section class="testimonials container scEnabledChrome" data-module="testimonials" sc-part-of="placeholder rendering">
<header>
<h2 class="testimonials__heading">
<span class="scChromeData"></span><span id="fld_77D47B44369D4ACE84D66C17A275811D_1D631840345E4DDEB0539099EA076EEE_en_1_e6929504dae7493c83cb7b24225421d3_292_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput scEnabledChrome" scfieldtype="single-line text" scdefaulttext="[No text in field]" sc-part-of="field">Testimonial Carousel</span>
</h2>
</header>
<div class="testimonials__slider">
<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
<div class="swiper-wrapper">
<span type="text/sitecore" sc-part-of="placeholder rendering" style="display: none;" class="scEnabledChrome"></span>
<div class="scEnabledChrome scEmptyPlaceholder" sc-placeholder-id="_Rows_TestimonialCarouselCards__C42E4A27_B288_4A35_82D6_BDF2B96BB2CA__0" sc-part-of="placeholder"></div><code type="text/sitecore" id="scEnclosingTag_" chrometype="placeholder" kind="close" hintname="TestimonialCarouselCards" class="scpm">
</div>
</div>
</div>
</section>
</div>
<div class="s-curve-card__content">
<h3 class="s-curve-card__subhead">Optional Subheading</h3>
<h2 class="s-curve-card__headline">S-Curve With Local Video</h2>
<div class="s-curve-card__description rtf">
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div>
<div class="s-curve-card__actions">
<a href="#" class="btn btn--primary">
Primary Call-to-Action
</a>
<a href="#" class="link link--primary">
Large Text Link
<svg viewBox="0 0 6 10" class="link__icon link__icon--right">
<use xlink:href="#chevron-right" />
</svg>
</a>
</div>
</div>
</article>
<article class="s-curve-card">
<div class="s-curve-card__media">
{{#if videoPlayer}}
{{>@video videoPlayer=videoPlayer videoId=videoId background=background poster=poster}}
{{else}}
{{#json image}}
{{>picture}}
{{/json}}
{{/if}}
</div>
<div class="s-curve-card__content">
{{#if subhead}}<h3 class="s-curve-card__subhead">{{subhead}}</h3>{{/if}}
<h2 class="s-curve-card__headline">{{headline}}</h2>
{{#if description}}
<div class="s-curve-card__description rtf">
{{{description}}}
</div>
{{/if}}
{{#ifCond buttonLabel "||" linkLabel}}
<div class="s-curve-card__actions">
{{#if buttonLabel}}
{{>@button type="link" label=buttonLabel className="primary"}}
{{/if}}
{{#if linkLabel}}
{{>@link label=linkLabel className="primary" icon="right"}}
{{/if}}
</div>
{{/ifCond}}
</div>
</article>
{
"mediaAlign": "right",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
},
"headline": "S-Curve With Local Video",
"subhead": "Optional Subheading",
"description": "<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>",
"buttonLabel": "Primary Call-to-Action",
"linkLabel": "Large Text Link",
"autoplay": false,
"videoPlayer": "video",
"background": true,
"videoId": "/images/video.mp4",
"poster": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=2&w=790&h=444"
}
.s-curve-card {
@include mq(desktop) {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
}
.s-curve-card__media {
width: 100%;
picture {
height: 0;
padding-bottom: 56.25%;
position: relative;
width: 100%;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
@include mq(desktop) {
width: calc(50% - 10px);
}
}
.s-curve-card__content {
padding: 24px 20px 28px;
@include mq(desktop) {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
width: calc(50% - 10px);
}
}
.s-curve-card__headline {
color: $primary-color;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
line-height: 1.13;
margin: 0 0 10px;
@include mq(desktop) {
margin-bottom: 10px;
}
}
.s-curve-card__subhead {
font-size: 21px;
margin-bottom: 17px;
text-transform: uppercase;
font-weight: 700;
line-height: 1.17;
margin: 0 0 10px;
@include mq(desktop) {
margin-bottom: 20px;
}
}
.s-curve-card__actions {
margin-top: 20px;
.btn {
width: 100%;
@include mq(desktop) {
width: auto;
}
& + .link {
margin-top: 26px;
@include mq(desktop) {
margin-left: 54px;
margin-top: 0;
}
}
}
@include mq(desktop) {
align-items: center;
display: flex;
}
}
$primary-color: map-get($theme-colors, "primary") !default;
S-Curve card that will be used in S-Curve Container component.
Add the front-end-component 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/C-FMT-6-s-curve-row/styles';Copy and paste to your project any of the markup in the alert 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 alert 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
$primary-colorYou always need to set your overrides before the import of you component - for example:
$primary-color: #06847b;
@import '../../node_modules/@verndale/front-end-components/lib/C-FMT-6-s-curve-row/styles';