<div class="masthead masthead--background-media ">
<div class="masthead__inner container ">
<div class="masthead__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="masthead__content">
<h1 class="masthead__heading">Masthead With Background Youtube Video Aligned Left Variation</h1>
<h2 class="masthead__subheading">Optional Subheading</h2>
<div class="masthead__copy 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="masthead__actions">
<a href="#" class="btn btn--primary">
Primary Call-to-Action
</a>
<a href="#" class="link link--primary">
Large Text Link
</a>
</div>
</div>
</div>
</div>
{{>@masthead}}
{
"mediaPosition": "background",
"subheading": "Optional Subheading",
"heading": "Masthead With Background Youtube Video Aligned Left Variation",
"copy": "<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>",
"ctaLabel": "Primary Call-to-Action",
"linkLabel": "Large Text Link",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=768&h=414",
"1024": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=1025&h=650"
},
"src": "https://verndale-image-tools.herokuapp.com/id/Ixp4YhCKZkI?w=760&h=650",
"description": "Image Description"
},
"media": true,
"autoplay": true,
"videoId": "DSLgAsrcpGQ",
"videoPlayer": "youtube",
"background": true
}
This component has 3 different variations on the image (right, left and full background)
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsCopy and paste to your project any of the markup in the masthead 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 masthead 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