Examples
Default styling
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--copy-right
Copy right
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--copy-left
Copy left
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--feature-copy-right
Feature copy right
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--feature-copy-left
Feature copy left
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--copy-only
Copy only 8 columns
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--copy-only-large
Copy only 10 columns
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--default-padding
Default
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--negative-top
Reduce top padding
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--negative-bottom
Reduce bottom padding
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--no-top-padding
Remove top padding
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--no-bottom-padding
Remove bottom padding
boring

Copy Right Copy Right Copy Right: 36

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
.single-msg--no-padding
Remove top and bottom padding
boring

Copy Right Copy Right Copy Right: 36

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 paragraph  {{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>
          Copy Right Copy Right Copy Right: 36
          </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--black" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
Source: _sr18-styleguide.scss, line 169