Duis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonFeature Single Message 16x9 img on tablet
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonFeature Single Message No background colour
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonFeature Single Message 16x9 img on tablet
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonFeature Single Message No background colour
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonDuis vel nibh at velit scelerisque suscipit
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonFeature Single Message 16x9 img on tablet
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
ButtonFeature Single Message No background colour
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Markup: components/single-msg/single-msg.twig
<section class="single-msg {{modifier_class}} bg--light-grey">
<div class="single-msg__outer-wrapper">
<div class="single-msg__image">
<picture>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/16-9-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/16-9-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
</div>
<div class="single-msg__copy_wrapper bg--white">
<div class="single-msg__copy">
<div class="single-msg__title">
<h2>Duis vel nibh at velit scelerisque suscipit</h2>
</div>
<div class="single-msg__body">
<p>
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
</p>
<a class="btn btn--yellow" href="#">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="single-msg {{modifier_class}} bg--light-grey">
<div class="single-msg__outer-wrapper">
<div class="single-msg__image">
<picture>
<source srcset="kss-assets/images/4-3-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/4-3-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/4-3-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/4-3-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
</div>
<div class="single-msg__copy_wrapper bg--white">
<div class="single-msg__copy">
<div class="single-msg__title">
<h2>Duis vel nibh at velit scelerisque suscipit</h2>
</div>
<div class="single-msg__body">
<p>
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
</p>
<a class="btn btn--yellow" href="#">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="single-msg {{modifier_class}} bg--light-grey">
<div class="single-msg__outer-wrapper">
<div class="single-msg__image">
<picture>
<source srcset="kss-assets/images/1-1-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/1-1-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/1-1-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/1-1-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
</div>
<div class="single-msg__copy_wrapper bg--white">
<div class="single-msg__copy">
<div class="single-msg__title">
<h2>Duis vel nibh at velit scelerisque suscipit</h2>
</div>
<div class="single-msg__body">
<p>
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
</p>
<a class="btn btn--yellow" href="#">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="single-msg single-msg--feature-copy-right bg--light-grey">
<div class="single-msg__outer-wrapper">
<div class="single-msg__image">
<picture>
<source srcset="kss-assets/images/1-1-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/1-1-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/1-1-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
</div>
<div class="single-msg__copy_wrapper bg--white">
<div class="single-msg__copy">
<div class="single-msg__title">
<h2>Feature Single Message 16x9 img on tablet</h2>
</div>
<div class="single-msg__body">
<p>
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
</p>
<a class="btn btn--yellow" href="#">Button</a>
</div>
</div>
</div>
</div>
</section>
<section class="single-msg single-msg--feature-copy-right bg--light-grey">
<div class="single-msg__outer-wrapper">
<div class="single-msg__image">
<picture>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/16-9-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/16-9-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
</div>
<div class="single-msg__copy_wrapper bg--no-colour">
<div class="single-msg__copy">
<div class="single-msg__title">
<h2>Feature Single Message No background colour</h2>
</div>
<div class="single-msg__body">
<p>
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
</p>
<a class="btn btn--yellow" href="#">Button</a>
</div>
</div>
</div>
</div>
</section>
_cr17-styleguide.scss
, line 188