@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/base/components/news-article/_news-article.scss

@@ -0,0 +1,128 @@
+.cr-article {
+	width: 100%;
+	background-color: $colour-smoke-grey;
+	@include breakpoint($screen-lg) {
+		padding: 60px 0;
+	}
+}
+.cr-article__content-wrapper {
+	max-width: 800px;
+	margin: 0 auto;
+}
+.cr-article__social-links {
+  @include clearfix;
+  display: block;
+}
+.cr-article__header {
+	margin: auto;
+	padding: 40px 0;
+	overflow: visible;
+	text-align: center;
+	background-color: $colour-white;
+}
+.cr-article__header--no-caption{
+	padding-bottom: 0;
+}
+.cr-article__title {
+	margin: 30px;
+	font-family: $font-medium;
+	@include font-size($h2-font-size);
+}
+.cr-article__date {
+	font-family: $font-black;
+	text-transform: uppercase;
+}
+.cr-article__image,
+.cr-article__video {
+	padding: 40px 0px;
+	img {
+		display: block;
+	}
+}
+.cr-article {
+	figcaption {
+		margin-top: -40px; //move caption up against image/video
+		padding: 10px 15px;
+		background-color: $colour-black;
+		color: $colour-white;
+		text-align: right;
+	}
+}
+
+.cr-article__body {
+	margin: auto;
+	padding: 0 30px 40px;
+	background-color: $colour-white;
+
+	.video-embed-field-responsive-video,
+	 figure,
+	 img {
+		width: calc(100% + 60px); //body has padding
+		margin: 15px 0 15px -30px;
+	}
+	.video-embed-field-responsive-video {
+		margin: 30px 0 40px -30px;
+	}
+	figure {
+		margin-top: 30px;
+	}
+	figure {
+		img {
+			width: 100%;
+			margin: 0;
+		}
+		figcaption {
+			width: 100%;
+			margin: 0px 0px 15px;
+		}
+	}
+	figcaption {
+		width: calc(100% + 60px);
+		margin: -40px 0 30px -30px;
+	}
+}
+
+@include breakpoint($screen-lg) {
+	.cr-article__header {
+		width: 80%;
+		padding: 60px 0 30px;
+	}
+	.cr-article__header--no-caption{
+		padding-bottom: 0;
+	}
+	.cr-article__image,
+	.cr-article__caption,
+	.video-embed-field-responsive-video,
+	figcaption,
+	figure {
+		width: calc(100% + (4 * 60px));
+		margin-left: -120px;
+	}
+	.cr-article__body {
+		width: 80%;
+		padding: 30px 60px 60px;
+
+		.video-embed-field-responsive-video,
+		figure,
+		img,
+		figcaption {
+			width: calc(100% + (6 * 60px));
+			margin-left: -180px;
+		}
+		figure {
+			img {
+				width: 100%;
+				margin: 0;
+			}
+			figcaption {
+				width: 100%;
+			}
+		}
+	}
+}
+
+.cr-article__bottom-region {
+	max-width: 100%;
+	margin: 0px;
+	background-color: $colour-red;
+}

package/src/sass/base/components/news-article/_press-release-article.scss

@@ -0,0 +1,21 @@
+.page-node-type-article--press-release {
+	.cr-article__header {
+		text-align: left;
+		width: 100%;
+		position: relative;
+	}
+	.cr-article__social-links {
+		display: none;
+	}
+	.cr-article__title {
+		color: $colour-red;
+		margin: 30px 30px 0;
+	}
+	.cr-article__date {
+		margin: 0 30px;
+	}
+	.cr-article__body {
+		width: 100%;
+		padding: 30px;
+	}
+}

package/src/sass/base/components/news-article/news-article.twig

@@ -0,0 +1,60 @@
+<article class="cr-article">
+  <div class="cr-article__content-wrapper">
+	  <header class="node node--type-article node--view-mode-full cr-article__header cr-article__header--no-caption">
+	    <div class="cr-article__social-links">
+	      <div class="social-links-label">
+	        <span>Share with:</span>
+	      </div>
+	      <div class="item-list"><ul class="social-links"><li><a href="http://twitter.com/home?status=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Twitter" class="social-link twitter-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-twitter"></use></svg></a></li><li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Facebook" class="social-link facebook-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-facebook"></use></svg></a></li></ul></div>
+	    </div>
+	    <h1 class="cr-article__title">Best Auction Ever - raising money for Red Nose Day</h1>
+	    <span class="cr-article__date">
+	      <div class="field__label visually-hidden">Display date</div>
+	      17 March 2017
+	      </span>
+	      	<div class="cr-article__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 srcset="kss-assets/images/16-9-img.jpg" alt="Africa" typeof="foaf:Image">
+				  </picture>
+	    	</div>
+	  </header>
+	  <section class="cr-article__body">
+	 		<div class="cr-body">
+	   		<p>Over 20 remarkable celebrity, film and television experiences and items are up for grabs in the <strong>#BestAuctionEver</strong> and prize draw give-away for Red Nose Day.</p>
+	   		<ul>
+	   		    <li><a class="link" href="#">Home </a></li>
+	   		    <li><a class="link" href="#">Your impact</a></li>
+	   		</ul>
+				<ul><li>Would you like a chat with <strong>Ed Sheeran</strong> backstage at one of his shows? Get involved.</li>
+					<li>Have you ever dreamt of flying to LA to hang out with <strong>James Corden</strong> at his chat show? He’s right there waiting for you.</li>
+					<li>Doctor Who fans, have you ever wondered what it would be like to sit down for brunch with not one, not two, but seven,<strong> Doctors</strong>? Wonder no more.</li>
+					<li>Feel like hanging out with the <strong>Formula 1 drivers</strong> at British Grand Prix week, while being given racing tips by <strong>Geri Horner</strong>? Now’s your chance.</li>
+				</ul><p>And not only that…</p>
+
+				<ul><li><strong>Claudia Winkleman</strong> is asking you to join her for a fringe trim and spray tan.</li>
+					<li>Five <strong>Masterchef </strong>winners want to come to your house to cook you dinner.</li>
+					<li><strong>Miranda Hart</strong> is hoping to take you for a gallop down The Strand.</li>
+					<li><strong>Little Mix</strong> are ready and waiting to skype you.</li>
+					<li><strong>Jamie Oliver</strong> and <strong>Michel Roux</strong> are longing to teach you to cook.</li>
+					<li><strong>Gareth Malone</strong> is up for a singing lesson.</li>
+					<li><strong>James Rhodes</strong> would like to play the piano in your house for 20 of your friends.</li>
+					<li><strong>Richard Curtis</strong> is waiting to give you a part in his next movie.</li>
+					<li><strong>Gillian Anderson</strong> wants to join you for a wander around the Tate Modern.</li>
+					<li><strong>Davina</strong> is looking for a private work out pal.</li>
+					<li><strong>Tom Fletcher</strong> is all set to come to your house for a story and a sing-song.</li>
+					<li>Baking legends, <strong>Mary Berry</strong> and <strong>Nadiya Hussein</strong> are in the kitchen wishing to make you a cake.</li>
+					<li><strong>Tanya Burr</strong> is excited to take you on a shopping spree with £1,000 to spend on you.</li>
+					<li><strong>Kirstie Allsopp</strong> is inviting you and your friends to her incredibly beautiful seaside house in Devon.</li>
+					<li><strong>Sofie Gråbøl</strong> has had enough of the jumper she wore in The Killing and would like you to have it instead.</li>
+				</ul><p>10 of these amazing experiences will also be up for grabs as part of a very special series of prize draws, so if bidding isn’t your thing, just £5 means you can enter online to be in with a chance of bagging yourself a once-in-a-lifetime experience.</p>
+
+				<p class="font--large"><strong>Get bidding now and help raise some serious life-changing cash this Red Nose Day.</strong></p>
+
+				<p class="font--large text-align-center"><a class="btn btn--red" href="https://www.givergy.com/charity/red-nose-day" target="_blank">See all items</a></p>
+	    </div>
+	  </section>
+  </div>
+</article>

package/src/sass/base/components/news-article/press-release-article.twig

@@ -0,0 +1,54 @@
+<div class="page-node-type-article--press-release">
+	<article class="cr-article">
+	  <div class="cr-article__content-wrapper">
+		  <header class="node node--type-article node--view-mode-full cr-article__header cr-article__header--no-caption">
+		    <div class="cr-article__social-links">
+		      <div class="social-links-label">
+		        <span>Share with:</span>
+		      </div>
+		      <div class="item-list"><ul class="social-links"><li><a href="http://twitter.com/home?status=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Twitter" class="social-link twitter-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-twitter"></use></svg></a></li><li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Facebook" class="social-link facebook-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-facebook"></use></svg></a></li></ul></div>  
+		    </div>
+		    <h1 class="cr-article__title">Best Auction Ever - raising money for Red Nose Day</h1>
+		    <span class="cr-article__date"> 
+		      <div class="field__label visually-hidden">Display date</div>
+		      17 March 2017
+		      </span>
+		  </header>
+		  <section class="cr-article__body">   
+		 		<div class="cr-body">
+		   		<p>Over 20 remarkable celebrity, film and television experiences and items are up for grabs in the <strong>#BestAuctionEver</strong> and prize draw give-away for Red Nose Day.</p>
+		   		<ul>
+		   		    <li><a class="link" href="#">Home </a></li>
+		   		    <li><a class="link" href="#">Your impact</a></li>
+		   		</ul>
+					<ul><li>Would you like a chat with <strong>Ed Sheeran</strong> backstage at one of his shows? Get involved.</li>
+						<li>Have you ever dreamt of flying to LA to hang out with <strong>James Corden</strong> at his chat show? He’s right there waiting for you.</li>
+						<li>Doctor Who fans, have you ever wondered what it would be like to sit down for brunch with not one, not two, but seven,<strong> Doctors</strong>? Wonder no more.</li>
+						<li>Feel like hanging out with the <strong>Formula 1 drivers</strong> at British Grand Prix week, while being given racing tips by <strong>Geri Horner</strong>? Now’s your chance.</li>
+					</ul><p>And not only that…</p>
+
+					<ul><li><strong>Claudia Winkleman</strong> is asking you to join her for a fringe trim and spray tan.</li>
+						<li>Five <strong>Masterchef </strong>winners want to come to your house to cook you dinner.</li>
+						<li><strong>Miranda Hart</strong> is hoping to take you for a gallop down The Strand.</li>
+						<li><strong>Little Mix</strong> are ready and waiting to skype you.</li>
+						<li><strong>Jamie Oliver</strong> and <strong>Michel Roux</strong> are longing to teach you to cook.</li>
+						<li><strong>Gareth Malone</strong> is up for a singing lesson.</li>
+						<li><strong>James Rhodes</strong> would like to play the piano in your house for 20 of your friends.</li>
+						<li><strong>Richard Curtis</strong> is waiting to give you a part in his next movie.</li>
+						<li><strong>Gillian Anderson</strong> wants to join you for a wander around the Tate Modern.</li>
+						<li><strong>Davina</strong> is looking for a private work out pal.</li>
+						<li><strong>Tom Fletcher</strong> is all set to come to your house for a story and a sing-song.</li>
+						<li>Baking legends, <strong>Mary Berry</strong> and <strong>Nadiya Hussein</strong> are in the kitchen wishing to make you a cake.</li>
+						<li><strong>Tanya Burr</strong> is excited to take you on a shopping spree with £1,000 to spend on you.</li>
+						<li><strong>Kirstie Allsopp</strong> is inviting you and your friends to her incredibly beautiful seaside house in Devon.</li>
+						<li><strong>Sofie Gråbøl</strong> has had enough of the jumper she wore in The Killing and would like you to have it instead.</li>
+					</ul><p>10 of these amazing experiences will also be up for grabs as part of a very special series of prize draws, so if bidding isn’t your thing, just £5 means you can enter online to be in with a chance of bagging yourself a once-in-a-lifetime experience.</p>
+
+					<p class="font--large"><strong>Get bidding now and help raise some serious life-changing cash this Red Nose Day.</strong></p>
+
+					<p class="font--large text-align-center"><a class="btn btn--black" href="https://www.givergy.com/charity/red-nose-day" target="_blank">See all items</a></p>
+		    </div>
+		  </section>
+	  </div>
+	</article>
+</div>

package/src/sass/base/components/news-overview/_news.scss

@@ -0,0 +1,118 @@
+
+.news-landing__wrapper {
+	padding: 60px 0;
+	background-color: $colour-smoke-grey;
+}
+.news-landing__content-wrapper {
+	width: calc(100% - (8 * 1.25%));
+	margin: auto;
+	@include breakpoint($screen-md) {
+		width: calc(100% - (4 * 1.25%));
+	}
+	@include breakpoint($screen-md-max) {
+		max-width: calc(1200px - (2 * 1.25%));
+	}
+}
+.news-landing__filter {
+	width: 100%;
+	margin: 0 0 50px 0;
+	padding: 20px;
+	background-color: $colour-white;
+	@include breakpoint($screen-lg) {
+		@include span(8);
+		margin: 0 auto 50px;
+		float: none;
+	}
+	@include breakpoint($desktop-nav-breakpoint) {
+		@include span(6);
+		margin: 0 auto 50px;
+		float: none;
+	}
+	.form-item {
+		width: 100%;
+		margin: 0px;
+		display: inline-block;
+		float: none;
+		label {
+			width: 100%;
+			float: left;
+			font-size: 18px;
+			line-height: 26px;
+			font-family: $body-font;
+			@include breakpoint($screen-md) {
+				width: 38%;
+				display: inline-block;
+				text-align: right;
+				font-size: 22px;
+				margin-top: 10px;
+			}
+		}
+		.ui-widget {
+			width: 100% !important; //override element styling
+			height: 50px;
+			float: left;
+			margin: 20px 0 0;
+			border-radius: 0px;
+			font-family: $font-regular;
+			color: $colour-black;
+			@include breakpoint($screen-md) {
+				width: 55.83333% !important; //override element styling
+				float: right;
+				margin: 0;
+				display: inline-block;
+			}
+			.ui-icon {
+				display:none;
+			}
+			.ui-selectmenu-text {
+				margin-right: 50px;
+				padding: 15px 15px 15px 25px;
+				border-right: 1px solid #cccccc;
+			}
+		}
+		.ui-widget::after {
+			position: absolute;
+			width: 12px;
+			height: 12px;
+			top: 16px;
+			right: 18px;
+			content: "";
+			border-left: 2px solid $colour-black;
+			border-bottom: 2px solid $colour-black;
+			-ms-transform: rotate(-45deg);
+			-webkit-transform: rotate(-45deg);
+			transform: rotate(-45deg);
+		}
+	}
+	.form-actions {
+		display: none;
+	}
+}
+.news-landing__content {
+	clear: both;
+	margin: auto;
+	@include breakpoint($screen-lg) {
+		@include clearfix;
+	}
+}
+.news-landing__item {
+	width: 100%;
+	height: 100%;
+	margin: 0 0 calc(4 * #{gutter()});
+	display: inline-block;
+	background-color: $colour-white;
+
+	@include breakpoint($screen-md) {
+		position: relative;
+		height: auto;
+	}
+	@include breakpoint($screen-lg) {
+		@include span(3);
+		height: 410px;
+		margin-bottom: calc(2 * #{gutter()});
+	}
+	&--press-release {
+		width: 100%;
+		height: auto;
+	}
+}

package/src/sass/base/components/news-overview/news.twig

@@ -0,0 +1,256 @@
+<section class="news-landing__wrapper">
+  <div class="news-landing__content-wrapper">
+    <div>
+      <div class="contextual-region view view-what-s-going-on view-id-what_s_going_on view-display-id-block_1 js-view-dom-id-6b20195c6178d9d04bccf4bba56ffa7ef7be375d3e64bb783ee2e74ce60ca95c">
+        <div class="news-landing__filter">
+          <form class="views-exposed-form bef-exposed-form" data-bef-auto-submit-full-form="" data-drupal-selector="views-exposed-form-what-s-going-on-block-1" action="/web/whats-going-on" method="get" id="views-exposed-form-what-s-going-on-block-1" accept-charset="UTF-8" data-drupal-form-fields="edit-field-article-category-target-id">
+            <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-field-article-category-target-id form-item-field-article-category-target-id">
+              <label for="edit-field-article-category-target-id-button">Filter by category:</label>
+              <select data-drupal-selector="edit-field-article-category-target-id" id="edit-field-article-category-target-id" name="field_article_category_target_id" class="form-select" style="display: none;">
+                <option value="All" selected="selected">All</option>
+                <option value="16">Challenges</option>
+                <option value="17">Fundraising</option>
+                <option value="19">Red Nose Day Partners</option>
+                <option value="14">The difference you make</option>
+              </select>
+              <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-field-article-category-target-id-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-field-article-category-target-id-menu" aria-haspopup="true" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false" style="width: 160px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">All</span></span>
+            </div>
+            <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-bef-auto-submit-click="" class="js-hide button js-form-submit form-submit" data-drupal-selector="edit-submit-what-s-going-on" type="submit" id="edit-submit-what-s-going-on" value="Apply"></div>
+          </form>
+        </div>
+        <div class="news-landing__content">
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__video">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article with video</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__video">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article with video</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__video">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article with video</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__video">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article with video</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__video">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article with video</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__image">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+          <div class="news-landing__item">
+            <article class="article-teaser">
+              <a class="article-teaser__link" href="#">
+                <div class="article-teaser__video">
+                  <picture>
+                    <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.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 2016
+                    </span>
+                    <h2>News article with video</h2>
+                  </div>
+                </div>
+              </a>
+            </article>
+          </div>
+        </div>
+        {# pagination #}
+        {% include directory ~ '../pagination/pagination.twig' %}
+      </div>
+    </div>
+  </div>
+</section>