@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/cr/2019/components/navigation/footer-nav.twig

@@ -0,0 +1,116 @@
+<footer role="contentinfo">
+  <div class="region region-footer cr-footer">
+    <div class="footer--minimal footer-nav-outer-wrapper">
+      <div class="footer-nav-inner-wrapper">
+        <div class="footer__social-links">
+          <ul>
+            <li>
+              <a href="https://www.facebook.com/comicrelief" title="Facebook" target="_blank" class="icon__fb">
+                <svg class="icon">
+                  <use xlink:href="#icon-facebook"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://twitter.com/comicrelief" title="Twitter" target="_blank" class="icon__twitter">
+                <svg class="icon">
+                  <use xlink:href="#icon-twitter"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw" title="Youtube" target="_blank" class="icon__youtube">
+                <svg class="icon">
+                  <use xlink:href="#icon-youtube"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.instagram.com/comicrelief" title="Instagram" target="_blank" class="icon__instagram">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
+                  <defs>
+                    <radialGradient id="a" cx="14.53" cy="2.37" r="50.41" gradientTransform="matrix(1, 0, 0, -1, 0, 52.25)" gradientUnits="userSpaceOnUse">
+                      <stop offset="0" stop-color="#ffd676"></stop>
+                      <stop offset="0.25" stop-color="#f2a454"></stop>
+                      <stop offset="0.38" stop-color="#f05c3c"></stop>
+                      <stop offset="0.7" stop-color="#c22f86"></stop>
+                      <stop offset="0.96" stop-color="#6666ad"></stop>
+                      <stop offset="0.99" stop-color="#5c6cb2"></stop>
+                    </radialGradient>
+                  </defs>
+                  <title>Rednoseday Instagram</title>
+                  <desc>Visit Rednoseday instagram page</desc>
+                  <circle cx="25" cy="25" r="25" fill="url(#a)"></circle>
+                  <path d="M25,13.25c3.83,0,4.28,0,5.79.08a7.93,7.93,0,0,1,2.66.49,4.75,4.75,0,0,1,2.72,2.72,7.93,7.93,0,0,1,.49,2.66c.07,1.51.08,2,.08,5.79s0,4.28-.08,5.79a7.93,7.93,0,0,1-.49,2.66,4.75,4.75,0,0,1-2.72,2.72,7.93,7.93,0,0,1-2.66.49c-1.51.07-2,.08-5.79.08s-4.28,0-5.79-.08a7.93,7.93,0,0,1-2.66-.49,4.75,4.75,0,0,1-2.72-2.72,7.93,7.93,0,0,1-.49-2.66c-.07-1.51-.08-2-.08-5.79s0-4.28.08-5.79a7.93,7.93,0,0,1,.49-2.66,4.75,4.75,0,0,1,2.72-2.72,7.93,7.93,0,0,1,2.66-.49c1.51-.07,2-.08,5.79-.08m0-2.58c-3.89,0-4.38,0-5.91.09a10.52,10.52,0,0,0-3.48.67,7.33,7.33,0,0,0-4.19,4.19,10.52,10.52,0,0,0-.67,3.48c-.07,1.53-.09,2-.09,5.91s0,4.38.09,5.91a10.52,10.52,0,0,0,.67,3.48,7.33,7.33,0,0,0,4.19,4.19,10.52,10.52,0,0,0,3.48.67c1.53.07,2,.09,5.91.09s4.38,0,5.91-.09a10.52,10.52,0,0,0,3.48-.67,7.33,7.33,0,0,0,4.19-4.19,10.52,10.52,0,0,0,.67-3.48c.07-1.53.09-2,.09-5.91s0-4.38-.09-5.91a10.52,10.52,0,0,0-.67-3.48,7.33,7.33,0,0,0-4.19-4.19,10.52,10.52,0,0,0-3.48-.67C29.38,10.69,28.91,10.67,25,10.67Z" fill="#fff"></path>
+                  <path d="M25,17.64A7.36,7.36,0,1,0,32.36,25,7.36,7.36,0,0,0,25,17.64Zm0,12.14A4.78,4.78,0,1,1,29.78,25h0A4.78,4.78,0,0,1,25,29.78Z" fill="#fff"></path>
+                  <circle cx="32.65" cy="17.35" r="1.72" fill="#fff"></circle>
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <nav role="navigation" aria-labelledby="block-comicrelief-footer-menu" id="block-comicrelief-footer" class="contextual-region block block-menu navigation menu--footer">
+          <h2 class="visually-hidden" id="block-comicrelief-footer-menu">Minimal footer menu</h2>
+          <div data-contextual-id="block:block=comicrelief_footer:langcode=en|menu:menu=footer:langcode=en" class="contextual" role="form">
+            <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Minimal footer menu configuration options</button>
+            <ul class="contextual-links" hidden="">
+              <li class="block-configure"><a href="/admin/structure/block/manage/comicrelief_footer?destination=node/21">Configure block</a></li>
+              <li class="entitymenuedit-form"><a href="/admin/structure/menu/manage/footer?destination=node/21">Edit menu</a></li>
+            </ul>
+          </div>
+          <ul class="menu">
+            <li class="menu-item">
+              <a href="/contact-us" target="" data-drupal-link-system-path="node/39">Contact us</a>
+            </li>
+            <li class="menu-item">
+              <a href="/working-with-us" data-drupal-link-system-path="node/8">Partners</a>
+            </li>
+            <li class="menu-item">
+              <a href="/careers" data-drupal-link-system-path="node/40">Careers</a>
+            </li>
+            <li class="menu-item">
+              <a href="/privacy-notice" data-drupal-link-system-path="node/615">Privacy</a>
+            </li>
+            <li class="menu-item">
+              <a href="/cookies-policy" data-drupal-link-system-path="node/952">Cookies</a>
+            </li>
+            <li class="menu-item">
+              <a href="/frequently-asked-questions" data-drupal-link-system-path="node/119">FAQs</a>
+            </li>
+            <li class="menu-item">
+              <a href="/legal" target="" data-drupal-link-system-path="node/125">Legal</a>
+            </li>
+            <li class="menu-item">
+              <a href="/press-releases" data-drupal-link-system-path="node/576">Press Area</a>
+            </li>
+            <li class="menu-item">
+              <a href="/accessibility" data-drupal-link-system-path="node/122">Accessibility</a>
+            </li>
+            <li class="menu-item">
+              <a href="/sitemap" data-drupal-link-system-path="node/418">Sitemap</a>
+            </li>
+            <li class="menu-item">
+              <a href="/reporting-concerns-about-our-organisation-or-operations" data-drupal-link-system-path="node/799">Reporting concerns</a>
+            </li>
+            <li class="menu-item">
+              <a href="/update-your-preferences" data-drupal-link-system-path="node/965">Update your preferences</a>
+            </li>
+            <li class="menu-item">
+              <a href="/comic-reliefs-statement-on-modern-slavery-and-human-trafficking" data-drupal-link-system-path="node/856">Modern slavery and human trafficking</a>
+            </li>
+          </ul>
+        </nav>
+        <div class="footer__copyright">
+          <p>Comic  Relief  is  the  trading  name  of  Charity  Projects,  a  registered  charity  in  England  and Wales  (326568)  and  Scotland  (SC039730),  which  is a company  limited  by  guarantee registered in England and Wales (01806414) with its registered address at Hanover House, 14 Hanover Square, London, W1S 1HP</p>
+        </div>
+        <div class="footer__branding">
+          <a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
+            <svg class="icon">
+              <use xlink:href="#crlogo2018"></use>
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

package/src/sass/themes/cr/2019/components/navigation/js/expanded-footer.js

@@ -0,0 +1,31 @@
+(function ($) {
+
+  var $context = $('.navigation.menu--expanded-footer');
+
+  $context.addClass("crExpandedFooter-processed");
+
+  setUpFooter();
+  
+  function setUpFooter() {
+    $('.menu-item a', $context).wrapInner('<span class="menu-item__text"></span>');
+    handleClick();
+  }
+
+  function handleClick() {
+
+    $('li.menu-item--expanded > a', $context).on('click', function (e) {
+
+      e.preventDefault();
+
+      // Only run this code if we're not on LG
+      if ( $('span.md-breakpoint').is(":not(:visible)")) {
+                
+        $(this).parent('li.menu-item--expanded').toggleClass('item-open');
+
+        $(this).attr('aria-expanded', function (i, attr) {
+          return attr == 'true' ? 'false' : 'true'
+        });
+      }
+    });  
+  }
+})(jQuery);

package/src/sass/themes/cr/2019/components/navigation/main-nav.twig

@@ -0,0 +1,97 @@
+<header role="banner">
+    <div class="header__inner-wrapper">
+        <div class="block block-system block-system-branding-block" id="block-comicrelief-branding">
+            <a class="site-logo" href="/" rel="home" tabindex="2" title="Home">
+                <img alt="Home" src="/themes/custom/comicrelief/logo.svg">
+            </a>
+        </div>
+        <div class="main-nav__wrapper">
+            <div class="main-nav__icons main-nav__burger">
+                <a aria-expanded="false" aria-haspopup="true" aria-label="Open and close Navigation Menu, 11 items listed" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" role="button">
+                    <div class="c-hamburger__text">
+                        <span class="visually-hidden">Open and close nav menu</span>
+                    </div>
+                    <span></span>
+                </a>
+            </div>
+            <nav aria-labelledby="block-comicrelief-main-menu-menu" class="block block-menu navigation menu--main" id="block-comicrelief-main-menu" role="navigation">
+                <h2 class="visually-hidden" id="block-comicrelief-main-menu-menu">Main navigation</h2>
+                <ul class="menu sm main-nav__items menu--level-0" id="main-menu">
+                    <li class="menu-item menu-item--expanded">
+                        <a aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="node/986" href="/what-we-do">
+                            <span class="menu-item__text">What Your Money Does</span>
+                        </a>
+                        <ul class="menu main-nav__items menu--level-1">
+                            <li class="menu-item menu-item--duplicate">
+                                <a href="/what-we-do">
+                                    <span class="menu-item__text">What Your Money Does</span>
+                                </a>
+                            </li>
+                            <li class="menu-item">
+                                <a data-drupal-link-system-path="node/126" href="/What-we-do/our-legacy">
+                                    <span class="menu-item__text">Our legacy</span>
+                                    </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="menu-item menu-item--expanded">
+                        <a aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="node/736" href="/funding">
+                            <span class="menu-item__text">Funding</span>
+                        </a>
+                        <ul class="menu main-nav__items menu--level-1">
+                            <li class="menu-item menu-item--duplicate">
+                                <a href="/funding">
+                                    <span class="menu-item__text">Funding</span>
+                                </a>
+                            </li>
+                            <li class="menu-item">
+                                <a href="/funding/applying-for-grants">
+                                    <span class="menu-item__text">Applying for funding</span>
+                                    </a>
+                            </li>
+                            <li class="menu-item">
+                                <a data-drupal-link-system-path="node/49" href="/funding/current-opportunities">
+                                    <span class="menu-item__text">Current opportunites</span>
+                                </a>
+                            </li>
+                            <li class="menu-item">
+                                <a href="/funding/managing-your-grant">
+                                    <span class="menu-item__text">Managing your funding</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="menu-item">
+                        <a data-drupal-link-system-path="node/1034" href="/schools">
+                            <span class="menu-item__text">Schools</span>
+                        </a>
+                    </li>
+                    <li class="menu-item">
+                        <a href="/fundraising/red-nose-day">
+                            <span class="menu-item__text">Red Nose Day</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+        <div class="block block-cr-meta-icons" id="block-comicrelief-metaiconsblock">
+            <div class="meta-icons">
+                <a class="btn btn--green donate" href="https://www.comicrelief.com/donate" target="_blank">
+                   Donate
+                </a>
+                <a class="meta-icons__magnify has-tooltip" href="#" role="button" title="Search">
+                    <svg class="icon" focusable="false" tabindex="-1">
+                        <use xlink:href="#icon-magnify"></use>
+                    </svg>
+                </a>
+                <a class="meta-icons__esu-toggle has-tooltip" href="#" role="button" title="Sign up for emails">
+                    <svg class="icon" focusable="false" tabindex="-1">
+                        <use xlink:href="#envelope"></use>
+                    </svg>
+                    <span>Sign up for emails</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</header>
+

package/src/sass/themes/cr/2019/components/news/_news.scss

@@ -0,0 +1,6 @@
+.news-landing__filter .form-item label {
+  @include breakpoint($screen-lg) {
+    font-size: 17px;
+    text-align: center;
+  }
+}

package/src/sass/themes/cr/2019/components/news-teaser/_news-article-teaser.scss

@@ -0,0 +1,13 @@
+.article-teaser .article-teaser__content-wrapper {
+  h2 {
+    font-family: $anton;
+    // Fake an H3 sizing, but keep it an H2 for semantic reasons
+    @extend h3;
+  }
+}
+
+.article-teaser .article-teaser__content-wrapper {
+  .article-teaser__date {
+    @extend .text--label-small;
+  }
+}

package/src/sass/themes/cr/2019/components/news-teaser/news-teaser.twig

@@ -0,0 +1,15 @@
+<article class="article-teaser">
+  <a href="#" class="article-teaser__link">
+    <div class="article-teaser__image">
+      <picture>
+        <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="/images/news-default-img--v2.jpg" alt="" typeof="foaf:Image">
+      </picture>
+    </div>
+    <div class="article-teaser__content-wrapper">
+      <div class="article-teaser__content">
+        <span class="article-teaser__date">28 October 2017</span>
+        <h2>News article title</h2>
+      </div>
+    </div>
+  </a>
+</article>

package/src/sass/themes/cr/2019/components/single-msg/_single-msg.scss

@@ -0,0 +1,242 @@
+
+
+/* Global styles for all variants, provides all styles for Copy Right variant */
+.single-msg {
+  width: 100%;
+  .single-msg__outer-wrapper {
+    @include container;
+    position: relative;
+    padding: 15vw 5vw;
+
+    @include breakpoint($screen-md) {
+      display: -webkit-flex;
+      display: flex;
+      padding: 60px calc(1 * #{gutter()});
+    }
+  }
+  .single-msg__image {
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    @include span(12 no-gutters wide);
+
+    @include breakpoint($screen-md) { 
+      @include span(4 no-gutters wide);
+    }
+  }
+  .single-msg__copy_wrapper {
+    @include span(12 no-gutters wide);
+
+    @include breakpoint($screen-md) { 
+      @include span(8 no-gutters wide);
+    }
+
+    .single-msg__copy {
+      padding: 30px;
+      width: 100%;
+
+      @include breakpoint($screen-md) {
+        height: 100%;
+      }
+    }
+    @include breakpoint($screen-md) {
+      &.bg--no-colour {
+        .single-msg__copy {
+          padding: 0 30px;
+        }
+      }
+    }
+  }
+
+  /* padding options */
+  // negative top 
+  &.single-msg--negative-top {
+    overflow: visible;
+    .single-msg__outer-wrapper {
+      padding-top: 0;
+      margin-top: -35px;
+      @include breakpoint($screen-md) {
+        margin-top: -60px;
+      }
+      // recalculate height and align copy with image
+      .single-msg__copy_wrapper {
+        margin-top: 0;
+      }
+    }
+  }
+  // negative bottom
+  &.single-msg--negative-bottom {
+    // move next section up 
+    + .paragraph { 
+      padding-top: 0;
+    }
+    .single-msg__outer-wrapper {
+      padding-bottom: 0;
+      //leave a bit of space underneath text
+      .single-msg__body {
+        padding-bottom: 5px;
+      }
+    }
+  }
+  // no top padding
+  &.single-msg--no-top-padding {
+    .single-msg__outer-wrapper {
+      padding-top: 0;
+      .single-msg__copy_wrapper {
+        margin-top: 0;
+      }
+    }
+  }
+  // no bottom padding
+  &.single-msg--no-bottom-padding {
+    .single-msg__outer-wrapper {
+      padding-bottom: 0;
+      //leave a bit of space underneath text
+      .single-msg__body {
+        padding-bottom: 5px;
+      }
+    }
+  }
+  // no top or bottom padding
+  &.single-msg--no-padding {
+    .single-msg__outer-wrapper {
+      padding-top: 0;
+      padding-bottom: 0;
+      .single-msg__copy_wrapper {
+        margin-top: 0;
+      }
+    }
+  }
+  // padding options feature variation fixes
+  // top
+  &.single-msg--negative-top,
+  &.single-msg--no-top-padding {
+    &.single-msg--feature-copy-right,
+    &.single-msg--feature-copy-left { 
+      .single-msg__copy_wrapper {
+        margin-top: calc(-4 *#{gutter()});
+        @include breakpoint($screen-lg) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+  // none
+  &.single-msg--no-padding {
+    &.single-msg--feature-copy-right,
+    &.single-msg--feature-copy-left { 
+      .single-msg__copy_wrapper {
+        margin-top: calc(-4 *#{gutter()});
+        @include breakpoint($screen-lg) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  /* Copy Left variation */
+  &.single-msg--copy-left {
+    @include breakpoint($screen-md) {
+      .single-msg__image {
+        float: right;
+        order: 2;
+      }
+    }
+  }
+
+  /* - - - - Featured Variations - - - - */
+
+  /* Feature Copy Left and Right variation */
+  &.single-msg--feature-copy-right,
+  &.single-msg--feature-copy-left  {
+
+    .single-msg__outer-wrapper {
+      @media (min-width: $screen-md) and (max-width: $screen-md-max) {
+        display: block;
+      }
+    }
+
+    .single-msg__image {
+      float: left;
+      width: 100%;
+      margin: 0;
+
+      @include breakpoint($screen-lg) {
+        @include span(6 no-gutters wide);     
+      }  
+    }
+
+    .single-msg__copy_wrapper {
+      width: 100%;
+
+      @include breakpoint($screen-md) {
+        &.bg--no-colour {
+          .single-msg__copy {
+            padding: 30px;
+
+            @include breakpoint($screen-lg) {
+              padding: 0 30px;
+            }
+          }
+        }
+      }
+
+      @include breakpoint($screen-lg) {
+        margin: 0;
+
+        @include span(6 no-gutters wide);
+      }
+    } 
+  }
+
+  /* Feature Copy Left variation */
+  &.single-msg--feature-copy-left {
+    .single-msg__image {
+      @include breakpoint($screen-lg) {
+        float: right;
+        margin-left: 0;
+        order: 2;
+      }
+    }
+  }
+
+  /* Copy Only - Copy Centred variation */
+  &.single-msg--copy-only {
+    .single-msg__image {
+      display: none;
+    }
+    .single-msg__copy_wrapper {
+      background-color: transparent;
+      .single-msg__copy {
+        padding: 0;
+
+        /* Remove margins from the last/only element in the body copy,
+          as to not mess up our vertical centering */
+        .single-msg__body :last-child {
+          margin-bottom: 0;
+        } 
+      }
+
+      @include breakpoint($screen-md) {
+        @include span(10);
+        @include push(1);
+        position: relative;
+        left: auto;
+        height: auto; //Does this need to match the height of the img version?
+        margin-top: 0;
+        
+        .single-msg__copy {
+          padding: 0 30px;
+        }
+      }
+
+      @include breakpoint($screen-lg) {
+        @include span(8);
+        @include push(2);
+      }
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/single-msg/single-msg.twig

@@ -0,0 +1,125 @@
+<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>

package/src/sass/themes/cr/2019/components/typography/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Anton|Montserrat:500,700,800');