@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/cr/2019/components/bg-video-copy/js/bg-video-copy.js

@@ -0,0 +1,72 @@
+(function($) {
+
+  var allVideos = [],
+      thisID = "",
+      thisSrc = "";
+
+  $(document).ready(function() {
+
+    var isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i);
+    var isSMBreakpoint = $('span.md-breakpoint').is(":not(:visible)");
+
+    // Stop any video functionality if we're using iOS and/or on the SM breakpoint
+    if (isIOS !== null || isSMBreakpoint) { 
+      return;
+    }
+
+    // Otherwise, do cool video stuff
+    $('.paragraph--background-video-copy').each(function(index) {
+
+      $this = $(this);
+      $thisVideo = $this.find('video');
+
+      // Dynamically create an ID and add it to the video for triggering purposes
+      thisID = 'background-video-copy__video-' + index;
+
+      $thisVideo.attr('id', thisID);
+
+      // Store a ref to this video and its offset bottom position
+      allVideos[index] = {
+        top: $this.offset().top,
+        id: thisID
+      };
+    });
+
+    // Only attach the handler if we've got vids in the current page
+    if (allVideos.length) {
+      handleScroll();
+    }
+  });
+
+
+  function handleScroll() {
+    // Won't recalculate this *every* scroll; resizes be damned
+    var winHeight = window.innerHeight,
+      winBottom = winHeight,
+      thisVideo = null,
+      videoCounter = 0;
+
+    // Initial check to trigger any videos that are already on-screen
+    if (winBottom >= allVideos[videoCounter].top) {
+      document.getElementById(allVideos[videoCounter].id).play();
+      videoCounter++;
+    }
+
+    $(window).on("scroll", function() {
+
+      // Figure out the current bottom position of the window
+      winBottom = window.pageYOffset + winHeight;
+
+      // Unbind the scroll handler if we've reached our total video number
+      if (videoCounter >= allVideos.length) {
+        $(window).off("scroll");
+      }
+
+      // If we've scrolled a video into view, trigger play
+      else if (winBottom >= allVideos[videoCounter].top && videoCounter < allVideos.length ) {
+        document.getElementById(allVideos[videoCounter].id).play();
+        videoCounter++;
+      }
+    });
+  }
+})(jQuery);

package/src/sass/themes/cr/2019/components/buttons/_buttons.scss

@@ -0,0 +1,174 @@
+// Buttons
+//
+// Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate (see Links). Buttons text uses the Black weight of the Sailec font.
+
+.btn {
+  display: inline-block;
+  width: 100%;
+  margin: 0 auto;
+  padding: 16px 30px;
+  cursor: pointer;
+  transition: 0;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+  border: none;
+  font-family: $montserrat;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+  @include border-radius(30px);
+  span {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  @include breakpoint($screen-md) {
+    width: auto;
+    padding: 21px 30px;
+    font-size: 18px;
+    line-height: 18px;
+  }
+
+  &.btn--full-width {
+    display: block;
+    width: 100%;
+    @include breakpoint($screen-md) {
+      display: inline-block;
+      width: auto;
+    }
+  }
+  + .btn {
+    margin-top: 30px;
+    @include breakpoint($screen-md) {
+      margin-top: 0;
+      margin-left: 25px;
+    }
+  }
+  &--fixed-width {
+    width: 100%;
+  }
+}
+
+p + p {
+  .btn {
+    margin-top: 10px;
+  }
+} 
+
+/* button(font_colour, bg_colour, hover bg-colour, hover font_colour) */
+.btn--black,
+.btn--deep-violet {
+  @include cr_button_types($colour-white, $colour-deep-violet, $colour-grey, $colour-deep-violet);
+}
+
+.btn--red {
+  @include cr_button_types($colour-white, $colour-red, $colour-light-coral, $hover-text-colour:$colour-deep-violet);
+}
+
+.btn--white {
+  @include cr_button_types($colour-deep-violet, $colour-white, $colour-grey, $colour-deep-violet);
+}
+
+/* Brand new Secondary buttons */
+.btn--grey {
+  @include cr_button_types($colour-deep-violet, $colour-grey, $colour-light-grey, $hover-text-colour:$colour-deep-violet);
+}
+.btn--coral {
+  @include cr_button_types($colour-deep-violet, $colour-coral, $colour-light-coral, $hover-text-colour:$colour-deep-violet);
+}
+.btn--orange {
+  @include cr_button_types($colour-deep-violet, $colour-orange, $colour-light-orange, $hover-text-colour:$colour-deep-violet);
+}
+.btn--yellow {
+  @include cr_button_types($colour-deep-violet, $colour-yellow, $colour-light-yellow, $hover-text-colour:$colour-deep-violet);
+}
+.btn--green {
+  @include cr_button_types($colour-deep-violet, $colour-green, $colour-light-green, $hover-text-colour:$colour-deep-violet);
+}
+.btn--blue {
+  @include cr_button_types($colour-deep-violet, $colour-blue, $colour-light-blue, $hover-text-colour:$colour-deep-violet);
+}
+.btn--purple {
+  @include cr_button_types($colour-deep-violet, $colour-purple, $colour-light-purple, $hover-text-colour:$colour-deep-violet);
+}
+.btn--magenta {
+  @include cr_button_types($colour-deep-violet, $colour-magenta, $colour-light-magenta, $hover-text-colour:$colour-deep-violet);
+}
+.btn--teal {
+  @include cr_button_types($colour-deep-violet, $colour-teal, $colour-light-teal, $hover-text-colour:$colour-deep-violet);
+}
+
+
+/* Brand new Secondary Light buttons */
+.btn--light-grey {
+  @include cr_button_types($colour-deep-violet, $colour-light-grey, $colour-dark-grey);
+}
+.btn--light-coral {
+  @include cr_button_types($colour-deep-violet, $colour-light-coral, $colour-dark-coral);
+}
+.btn--light-orange {
+  @include cr_button_types($colour-deep-violet, $colour-light-orange, $colour-dark-orange);
+}
+.btn--light-yellow {
+  @include cr_button_types($colour-deep-violet, $colour-light-yellow, $colour-dark-yellow);
+}
+.btn--light-green {
+  @include cr_button_types($colour-deep-violet, $colour-light-green, $colour-dark-green);
+}
+.btn--light-blue {
+  @include cr_button_types($colour-deep-violet, $colour-light-blue, $colour-dark-blue);
+}
+.btn--light-magenta {
+  @include cr_button_types($colour-deep-violet, $colour-light-magenta, $colour-dark-magenta);
+}
+.btn--light-purple {
+  @include cr_button_types($colour-deep-violet, $colour-light-purple, $colour-dark-purple);
+}
+.btn--light-teal {
+  @include cr_button_types($colour-deep-violet, $colour-light-teal, $colour-dark-teal);
+}
+
+/* Brand new Secondary Dark buttons */
+.btn--dark-grey {
+  @include cr_button_types($colour-white, $colour-dark-grey, $colour-grey, $colour-deep-violet);
+}
+.btn--dark-coral {
+  @include cr_button_types($colour-white, $colour-dark-coral, $colour-coral, $colour-deep-violet);
+}
+.btn--dark-orange {
+  @include cr_button_types($colour-white, $colour-dark-orange, $colour-orange, $colour-deep-violet);
+}
+.btn--dark-yellow {
+  @include cr_button_types($colour-white, $colour-dark-yellow, $colour-yellow, $colour-deep-violet);
+}
+.btn--dark-green {
+  @include cr_button_types($colour-white, $colour-dark-green, $colour-green, $colour-deep-violet);
+}
+.btn--dark-blue {
+  @include cr_button_types($colour-white, $colour-dark-blue, $colour-blue, $colour-deep-violet);
+}
+.btn--dark-magenta {
+  @include cr_button_types($colour-white, $colour-dark-magenta, $colour-magenta, $colour-deep-violet);
+}
+.btn--dark-purple {
+  @include cr_button_types($colour-white, $colour-dark-purple, $colour-purple, $colour-deep-violet);
+}
+.btn--dark-teal {
+  @include cr_button_types($colour-white, $colour-dark-teal, $colour-teal, $colour-deep-violet);
+}
+
+
+/* Backward compatibility; old class names, new colour vars */
+.btn--royal-blue {
+  @include cr_button_types($colour-deep-violet, $colour-royal-blue, $colour-dark-blue);
+}
+.btn--mint-green {
+  @include cr_button_types($colour-deep-violet, $colour-teal, $colour-red);
+}
+
+/* Membership donate button, new colour var */
+.btn--membership-red {
+  @include cr_button_types($colour-white, $colour-donate-red, $colour-donate-dark-red, $colour-white);
+}
+

package/src/sass/themes/cr/2019/components/buttons/buttons.twig

@@ -0,0 +1,128 @@
+<h3>Primary buttons</h3>
+<p>Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button <b>.btn .btn--dark-purple</b> class</p>
+
+
+<a class="btn btn--red" href="#">Link</a>
+<button class="btn btn--red">Button</button>
+<p style="margin-top: 10px;">Red variation <i>.btn--red</i></p>
+
+<a class="btn btn--deep-violet" href="#">Link</a>
+<button class="btn btn--deep-violet">Button</button>
+<p style="margin-top: 10px;">Deep violet variation <i>.btn--deep-violet</i></p>
+
+<a class="btn btn--grey" href="#">Link</a>
+<button class="btn btn--grey">Button</button>
+<p style="margin-top: 10px;">Grey variation <i>.btn--grey</i></p>
+
+<a class="btn btn--coral" href="#">Link</a>
+<button class="btn btn--coral">Button</button>
+<p style="margin-top: 10px;">Coral variation <i>.btn--coral</i></p>
+
+<a class="btn btn--orange" href="#">Link</a>
+<button class="btn btn--orange">Button</button>
+<p style="margin-top: 10px;">Orange variation <i>.btn--orange</i></p>
+
+<a class="btn btn--yellow" href="#">Link</a>
+<button class="btn btn--yellow">Button</button>
+<p style="margin-top: 10px;">Yellow variation <i>.btn--yellow</i></p>
+
+<a class="btn btn--green" href="#">Link</a>
+<button class="btn btn--green">Button</button>
+<p style="margin-top: 10px;">Green variation <i>.btn--green</i></p>
+
+<a class="btn btn--blue" href="#">Link</a>
+<button class="btn btn--blue">Button</button>
+<p style="margin-top: 10px;">Blue variation <i>.btn--blue</i></p>
+
+<a class="btn btn--purple" href="#">Link</a>
+<button class="btn btn--purple">Button</button>
+<p style="margin-top: 10px;">Purple variation <i>.btn--purple</i></p>
+
+<a class="btn btn--magenta" href="#">Link</a>
+<button class="btn btn--magenta">Button</button>
+<p style="margin-top: 10px;">Magenta variation <i>.btn--magenta</i></p>
+
+<a class="btn btn--teal" href="#">Link</a>
+<button class="btn btn--teal">Button</button>
+<p style="margin-top: 10px;">Teal variation <i>.btn--teal</i></p>
+
+
+{# LIGHT BUTTONS #}
+<a class="btn btn--light-grey" href="#">Link</a>
+<button class="btn btn--light-grey">Button</button>
+<p style="margin-top: 10px;">Light grey variation <i>.btn--light-grey</i></p>
+
+<a class="btn btn--light-coral" href="#">Link</a>
+<button class="btn btn--light-coral">Button</button>
+<p style="margin-top: 10px;">Light coral variation <i>.btn--light-coral</i></p>
+
+<a class="btn btn--light-orange" href="#">Link</a>
+<button class="btn btn--light-orange">Button</button>
+<p style="margin-top: 10px;">Light orange variation <i>.btn--light-orange</i></p>
+
+<a class="btn btn--light-yellow" href="#">Link</a>
+<button class="btn btn--light-yellow">Button</button>
+<p style="margin-top: 10px;">Light yellow variation <i>.btn--light-yellow</i></p>
+
+<a class="btn btn--light-green" href="#">Link</a>
+<button class="btn btn--light-green">Button</button>
+<p style="margin-top: 10px;">Light green variation <i>.btn--light-green</i></p>
+
+<a class="btn btn--light-blue" href="#">Link</a>
+<button class="btn btn--light-blue">Button</button>
+<p style="margin-top: 10px;">Light blue variation <i>.btn--light-blue</i></p>
+
+<a class="btn btn--light-purple" href="#">Link</a>
+<button class="btn btn--light-purple">Button</button>
+<p style="margin-top: 10px;">Light purple variation <i>.btn--light-purple</i></p>
+
+<a class="btn btn--light-magenta" href="#">Link</a>
+<button class="btn btn--light-magenta">Button</button>
+<p style="margin-top: 10px;">Light magenta variation <i>.btn--light-</i></p>
+
+<a class="btn btn--light-teal" href="#">Link</a>
+<button class="btn btn--light-teal">Button</button>
+<p style="margin-top: 10px;">Light teal variation <i>.btn--light-teal</i></p>
+
+{# DARK BUTTONS #}
+<a class="btn btn--dark-grey" href="#">Link</a>
+<button class="btn btn--dark-grey">Button</button>
+<p style="margin-top: 10px;">Dark grey variation <i>.btn--dark-grey</i></p>
+
+<a class="btn btn--dark-coral" href="#">Link</a>
+<button class="btn btn--dark-coral">Button</button>
+<p style="margin-top: 10px;">Dark coral variation <i>.btn--dark-coral</i></p>
+
+<a class="btn btn--dark-orange" href="#">Link</a>
+<button class="btn btn--dark-orange">Button</button>
+<p style="margin-top: 10px;">Dark orange variation <i>.btn--dark-orange</i></p>
+
+<a class="btn btn--dark-yellow" href="#">Link</a>
+<button class="btn btn--dark-yellow">Button</button>
+<p style="margin-top: 10px;">Dark yellow variation <i>.btn--dark-yellow</i></p>
+
+<a class="btn btn--dark-green" href="#">Link</a>
+<button class="btn btn--dark-green">Button</button>
+<p style="margin-top: 10px;">Dark green variation <i>.btn--dark-green</i></p>
+
+<a class="btn btn--dark-blue" href="#">Link</a>
+<button class="btn btn--dark-blue">Button</button>
+<p style="margin-top: 10px;">Dark blue variation <i>.btn--dark-blue</i></p>
+
+<a class="btn btn--dark-magenta" href="#">Link</a>
+<button class="btn btn--dark-magenta">Button</button>
+<p style="margin-top: 10px;">Dark magenta variation <i>.btn--dark-</i></p>
+
+<a class="btn btn--dark-purple" href="#">Link</a>
+<button class="btn btn--dark-purple">Button</button>
+<p style="margin-top: 10px;">Dark purple variation <i>.btn--dark-purple</i></p>
+
+<a class="btn btn--dark-teal" href="#">Link</a>
+<button class="btn btn--dark-teal">Button</button>
+<p style="margin-top: 10px;">Dark teal variation <i>.btn--dark-teal</i></p>
+
+<div class="bg--black" style="padding: 20px; margin-bottom: 20px;">
+  <a class="btn btn--white" href="#">Link</a>
+  <button class="btn btn--white">Button</button>
+  <p style="margin-top: 10px;">White variation <i>.btn--white</i></p>
+</div>

package/src/sass/themes/cr/2019/components/content-block/_content-block.scss

@@ -0,0 +1,5 @@
+
+
+.content-block__content {
+  background-image: linear-gradient(rgba(0,0,0,0), $colour-dark-purple);
+}

package/src/sass/themes/cr/2019/components/content-block/content-block.twig

@@ -0,0 +1,20 @@
+<div class="cw-region">
+  <article class="contextual-region block-content block-content--type-content-reference-block {{ modifier_class }} content-block clearfix">
+    <div class="content-block__image">
+      <div class="media media--blazy  media--responsive media--image">
+        <picture>
+          <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
+        </picture>
+      </div>
+    </div>
+    <div class="content-block__content-wrapper">
+      <div class="content-block__content">
+        <span class="content-block__tag font--mint-green font--family-black">News</span>
+        <h4>
+          Red Nose Day is coming soon to BBC One
+        </h4>
+      </div>
+    </div>
+    <a href="#" class="content-block__link" hreflang="en">Read more</a>
+  </article>
+</div>

package/src/sass/themes/cr/2019/components/content-wall/_content-wall.scss

@@ -0,0 +1,6 @@
+.teaser-block {
+  .teaser-block__body {
+    text-align: left;
+    justify-content: flex-start;
+  } 
+}

package/src/sass/themes/cr/2019/components/content-wall/content-wall.twig

@@ -0,0 +1,213 @@
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-l teaser-block teaser-block--bg-image clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="contextual-region block-content block-content--type-content-reference-block block-content--view-mode-cw-m content-block clearfix">
+            <div class="content-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="content-block__content-wrapper">
+              <div class="content-block__content">
+                <span class="content-block__tag font--mint-green font--font-black">News</span>
+                <h4>
+                  Red Nose Day is coming soon to BBC One
+                </h4>
+              </div>
+            </div>
+            <a href="#" class="content-block__link" hreflang="en">Read more</a>
+          </article>
+        </li>
+        <li>
+          <article class="block-content--view-mode-cw-m teaser-block clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-s cw-quote clearfix">
+            <div class="cw-quote__outer-wrapper">
+              <div class="cw-quote__bg-image">
+                <img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
+              </div>
+              <div class="cw-quote__inner-wrapper">
+                <div class="cw-quote__image bg--purple">
+                  <img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
+                </div>
+                <div class="cw-quote__body">
+                  <h3 class="font--yellow">Jo's Top Tip</h3>
+                  <h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
+                </div>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-mp media-block clearfix">
+            <div class="media-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="media-block__content-wrapper">
+              <div class="media-block__content">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+                  <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+                    s20-9,20-20S31,0,20,0L20,0z"></path>
+                  <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+                </svg>
+                <div class="cr-body">
+                  <h4>Relive all the best bits of last Red Nose Day</h4>
+                  <p class="font--mint-green"><strong>20:20</strong></p>
+                </div>
+              </div>
+            </div>
+            <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+            <div class="media-block__caption">
+              <div class="cr-body">
+                <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+                <p><a class="btn btn--red" href="#">See how to join in</a></p>
+              </div>
+            </div>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title">
+    Row's title can be hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-s teaser-block clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+        <li>
+          <article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-s media-block clearfix">
+            <div class="media-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="media-block__content-wrapper">
+              <div class="media-block__content">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+                  <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+                    s20-9,20-20S31,0,20,0L20,0z"></path>
+                  <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+                </svg>
+                <div class="cr-body">
+                  <h4>Relive all the best bits of last Red Nose Day</h4>
+                  <p class="font--mint-green"><strong>20:20</strong></p>
+                </div>
+              </div>
+            </div>
+            <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+            <div class="media-block__caption">
+              <div class="cr-body">
+                <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+                <p><a class="btn btn--red" href="#">See how to join in</a></p>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article class="block-content--view-mode-cw-s cw-quote clearfix">
+            <div class="cw-quote__outer-wrapper">
+              <div class="cw-quote__bg-image">
+                <img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
+              </div>
+              <div class="cw-quote__inner-wrapper">
+                <div class="cw-quote__image bg--purple">
+                  <img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
+                </div>
+                <div class="cw-quote__body">
+                  <h3 class="font--yellow">Jo's Top Tip</h3>
+                  <h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
+                </div>
+              </div>
+            </div>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>

package/src/sass/themes/cr/2019/components/cookie-consent/cookie-consent.json

@@ -0,0 +1,7 @@
+{
+	"message": "We use cookies. By continuing to use this site you are agreeing to our terms of use. ",
+	"target":"_blank",
+	"link":"https://www.rednoseday.com/legal#terms",
+	"learn_more": "Learn more",
+	"dismiss": "Close"
+}

package/src/sass/themes/cr/2019/components/cookie-consent/cookie-consent.twig

@@ -0,0 +1,7 @@
+<div class="cookie-consent cc_banner cc_container cc_container--open cc_banner--drupal">
+  <p class="cc_message">Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about our use of cookies <a target="_blank" class="cc_more_info link link--white inline" href="/cookies-policy">here</a>. We also use optional cookies for marketing purposes:
+  </p>
+  <p class="cc_message">
+    <a href="#null" class="btn btn--white accept-cookies">Accept</a> Or click <a href="#" class="link deny-cookies link--white inline">here</a> to deny these.
+  </p>
+</div>