<section class="s-curve container">
<article class="s-curve-card">
<div class="s-curve-card__media">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
</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 Small Image</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">
<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>
</section>
<section class="s-curve container">
{{#json cards}}
{{#each this}}
{{>@c-fmt-6-s-curve-row}}
{{/each}}
{{/json}}
</section>
{
"cards": [
{
"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 Small Image",
"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"
},
{
"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 {
margin-bottom: map-get($module-spacing, 'mobile');
margin-top: map-get($module-spacing, 'mobile');
@include mq($until: desktop) {
padding: 0;
}
@include mq(desktop) {
margin-bottom: map-get($module-spacing, 'desktop');
margin-top: map-get($module-spacing, 'desktop');
}
.s-curve-card {
&:nth-child(even) {
@include mq(desktop) {
flex-direction: row;
}
}
& + .s-curve-card {
margin-top: 20px;
@include mq(desktop) {
margin-top: 40px;
}
}
}
}
Provide an S-Curve component for content authors to create a brand specific marketing message to entice users to further explore the content of the website.
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-5-s-curve-container/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.