---
layout: template1
pagetitle: Template 4 standard article with slideout |
prevpage: standardarticle-withslideout
nextpage: fullpage
containerclass: article
mirrored: true
pagemedia: http://via.placeholder.com/720x1080
pagemediatype: img
articletype: Template 4
articletitle: Standard article with slideout mirrored
articlestandfirst: Standfirst - Block of text that introduces the story, normally in a style different to the body text and headline.
---
<div class="cell large-3 xlarge-2 article-slideout {{#if mirrored}} mirrored{{/if}}" id="article-slideout-1" style="display: none">

	<button class="close-button close-slideout" type="button">
	    <span aria-hidden="true">&times;</span>
	  </button>

	<div class="grid-x">

		<div class="cell cell-block large-cell-block-y">

			<p class="article-slideout-cta">Shop Now 1</p>

			<div class="grid-x article-slideout-container">
			{{#repeat 5}}

				<a href="" class="cell article-slideout-item">
					
					<div class="article-slideout-img">
						<img src="http://via.placeholder.com/600x600">
					</div>

					<div class="article-slideout-txt">
						<h3 class="article-slideout-title">Fusce posuere molestie </h3>
						<p class="article-slideout-desc show-for-large">Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla.</p>
					</div>

				</a>	

			{{/repeat}}
			</div>

		</div>

	</div>


</div>

<div class="cell large-3 xlarge-2 article-slideout {{#if mirrored}} mirrored{{/if}}" id="article-slideout-2" style="display: none">

<button class="close-button close-slideout" type="button">
    <span aria-hidden="true">&times;</span>
  </button>


	<div class="grid-x">

		<div class="cell cell-block large-cell-block-y">

			<p class="article-slideout-cta">Shop Now 2</p>

			<div class="grid-x article-slideout-container">
			{{#repeat 5}}

				<a href="" class="cell article-slideout-item">
					
					<div class="article-slideout-img">
						<img src="http://via.placeholder.com/600x600">
					</div>

					<div class="article-slideout-txt">
						<h3 class="article-slideout-title">Fusce posuere molestie </h3>
						<p class="article-slideout-desc show-for-large">Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla.</p>
					</div>

				</a>	

			{{/repeat}}
			</div>

		</div>

	</div>


</div>

<div class="cell medium-8 large-12 xlarge-9 article-page-content-inner">

	<div class="article-copy">
		<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut condimentum nibh. Suspendisse imperdiet risus erat. Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla, elementum porttitor odio. Ut eleifend pellentesque metus eu faucibus. Curabitur velit elit, ornare quis interdum eu, condimentum porta quam. Vestibulum imperdiet sem at nisl posuere facilisis. Cras sodales urna eget orci volutpat, et maximus massa vulputate. Nunc ullamcorper pretium orci.</p>
	</div>

</div>

<blockquote class="cell medium-8 large-12 xlarge-9 article-page-content-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut.</p>
   <cite>Yves Saint Laurent</cite>
</blockquote>

<div class="cell medium-8 large-12 xlarge-9 article-page-content-inner article-slideout-trigger" id="article-slideout-1-content">

	<div class="article-copy">

		<p><strong>Slider 1 reveal Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut condimentum nibh. Suspendisse imperdiet risus erat. Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla, elementum porttitor odio. Ut eleifend pellentesque metus eu faucibus. Curabitur velit elit, ornare quis interdum eu, condimentum porta quam. Vestibulum imperdiet sem at nisl posuere facilisis. Cras sodales urna eget orci volutpat, et maximus massa vulputate. Nunc ullamcorper pretium orci.</p>

		<p>Mauris vulputate, dolor ac faucibus pharetra, eros libero varius erat, quis pretium lorem lacus id augue. Praesent id pellentesque ante. Ut purus purus, dapibus ac luctus a, laoreet in metus. Nulla maximus tempus malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eget augue non sem luctus facilisis sit amet a dui. Integer tristique elit metus, vitae tincidunt nunc egestas sed. Sed eget enim a velit aliquet gravida sodales at dui. Sed ornare egestas pellentesque. Sed varius lacus nibh, ut tempus nisl consectetur vel. Praesent id tellus lorem. Fusce mattis lobortis erat, ac sollicitudin odio consectetur non. </p>
		<p>Etiam vel feugiat justo. Duis eu eros scelerisque, suscipit velit eu, aliquet metus. Donec rhoncus eget lorem consequat luctus. Ut consectetur odio quis suscipit ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci magna, rhoncus in neque ut, euismod aliquam lectus. Donec in libero sodales, fringilla mauris a, imperdiet diam. Integer erat quam, commodo eget scelerisque non, sagittis id neque. Suspendisse mollis orci non posuere efficitur. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Donec eu ullamcorper orci, eget suscipit arcu. Ut ut fringilla purus. Donec aliquam est at elit blandit, vehicula venenatis ligula vehicula. Curabitur eu congue nisi. Integer sit amet est fermentum, dapibus diam in, aliquam lorem. Cras vel lacinia turpis. In ligula nibh, aliquam eu eleifend sit amet, posuere ut felis. Etiam et leo ut elit vestibulum blandit sed ut mi. Suspendisse eleifend ut turpis in maximus.</p>

		<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut condimentum nibh. Suspendisse imperdiet risus erat. Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla, elementum porttitor odio. Ut eleifend pellentesque metus eu faucibus. Curabitur velit elit, ornare quis interdum eu, condimentum porta quam. Vestibulum imperdiet sem at nisl posuere facilisis. Cras sodales urna eget orci volutpat, et maximus massa vulputate. Nunc ullamcorper pretium orci.</p>

		<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut condimentum nibh. Suspendisse imperdiet risus erat. Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla, elementum porttitor odio. Ut eleifend pellentesque metus eu faucibus. Curabitur velit elit, ornare quis interdum eu, condimentum porta quam. Vestibulum imperdiet sem at nisl posuere facilisis. Cras sodales urna eget orci volutpat, et maximus massa vulputate. Nunc ullamcorper pretium orci.</p>

	</div>

</div>

<blockquote class="cell medium-8 large-12 xlarge-9 article-page-content-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut.</p>
   <cite>Yves Saint Laurent</cite>
</blockquote>

<div class="cell medium-8 large-12 xlarge-9 article-page-content-inner article-slideout-trigger" id="article-slideout-2-content">

	<div class="article-copy">

	<p><strong>Slider 2 reveal Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sapien vitae dolor iaculis pellentesque sagittis sit amet metus. Curabitur ut condimentum nibh. Suspendisse imperdiet risus erat. Fusce posuere molestie turpis sed eleifend. Proin at sagittis nulla, elementum porttitor odio. Ut eleifend pellentesque metus eu faucibus. Curabitur velit elit, ornare quis interdum eu, condimentum porta quam. Vestibulum imperdiet sem at nisl posuere facilisis. Cras sodales urna eget orci volutpat, et maximus massa vulputate. Nunc ullamcorper pretium orci.</p>

	<p>Mauris vulputate, dolor ac faucibus pharetra, eros libero varius erat, quis pretium lorem lacus id augue. Praesent id pellentesque ante. Ut purus purus, dapibus ac luctus a, laoreet in metus. Nulla maximus tempus malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eget augue non sem luctus facilisis sit amet a dui. Integer tristique elit metus, vitae tincidunt nunc egestas sed. Sed eget enim a velit aliquet gravida sodales at dui. Sed ornare egestas pellentesque. Sed varius lacus nibh, ut tempus nisl consectetur vel. Praesent id tellus lorem. Fusce mattis lobortis erat, ac sollicitudin odio consectetur non. </p>

	<p>Etiam vel feugiat justo. Duis eu eros scelerisque, suscipit velit eu, aliquet metus. Donec rhoncus eget lorem consequat luctus. Ut consectetur odio quis suscipit ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci magna, rhoncus in neque ut, euismod aliquam lectus. Donec in libero sodales, fringilla mauris a, imperdiet diam. Integer erat quam, commodo eget scelerisque non, sagittis id neque. Suspendisse mollis orci non posuere efficitur. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Donec eu ullamcorper orci, eget suscipit arcu. Ut ut fringilla purus. Donec aliquam est at elit blandit, vehicula venenatis ligula vehicula. Curabitur eu congue nisi. Integer sit amet est fermentum, dapibus diam in, aliquam lorem. Cras vel lacinia turpis. In ligula nibh, aliquam eu eleifend sit amet, posuere ut felis. Etiam et leo ut elit vestibulum blandit sed ut mi. Suspendisse eleifend ut turpis in maximus.</p>

	<p>Mauris vulputate, dolor ac faucibus pharetra, eros libero varius erat, quis pretium lorem lacus id augue. Praesent id pellentesque ante. Ut purus purus, dapibus ac luctus a, laoreet in metus. Nulla maximus tempus malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eget augue non sem luctus facilisis sit amet a dui. Integer tristique elit metus, vitae tincidunt nunc egestas sed. Sed eget enim a velit aliquet gravida sodales at dui. Sed ornare egestas pellentesque. Sed varius lacus nibh, ut tempus nisl consectetur vel. Praesent id tellus lorem. Fusce mattis lobortis erat, ac sollicitudin odio consectetur non. </p>


	<p>Etiam vel feugiat justo. Duis eu eros scelerisque, suscipit velit eu, aliquet metus. Donec rhoncus eget lorem consequat luctus. Ut consectetur odio quis suscipit ultricies.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci magna, rhoncus in neque ut, euismod aliquam lectus. Donec in libero sodales, fringilla mauris a, imperdiet diam. Integer erat quam, commodo eget scelerisque non, sagittis id neque. Suspendisse mollis orci non posuere efficitur. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Donec eu ullamcorper orci, eget suscipit arcu. Ut ut fringilla purus. Donec aliquam est at elit blandit, vehicula venenatis ligula vehicula. Curabitur eu congue nisi. Integer sit amet est fermentum, dapibus diam in, aliquam lorem. Cras vel lacinia turpis. In ligula nibh, aliquam eu eleifend sit amet, posuere ut felis. Etiam et leo ut elit vestibulum blandit sed ut mi. Suspendisse eleifend ut turpis in maximus.</p>

	</div>

</div>