Content
#
Grey Section {% include 'components/content/grey-section' %}
#
HTML 
<div class="grey-section">
	<div class="inner">
		<h1>Grey section</h1>	
	</div>
</div>
Twig 
<div class="grey-section">
	<div class="inner">
		<h1>Grey section</h1>	
	</div>
</div>
{}

Grey section

Dark Grey Section {% include 'components/content/dark-grey-section' %}
#
HTML 
<div class="dark-grey-section dark-grey-section--c19 section--overlap-top clearfix">	
	<div class="container">
		<div class="image-quote">

			<picture class="animate-up">
				<source media="(min-width: 1400px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
				<source media="(min-width: 1200px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
				<source media="(min-width: 1000px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
				<source media="(min-width: 800px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
			  	<source media="(min-width: 647px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
			 	<source media="(min-width: 465px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg">
			 	<source media="(min-width: 375px)" srcset="/images/mainsite5/c19/mobile-image-quote.jpg" alt="alt">
			 	<img src="/images/mainsite5/c19/mobile-image-quote.jpg" alt="alt">
			</picture>
			<blockquote class="quote-block quote-block-- quote-block--yellow ">
	<div class="quote-block__container">
		<p>&#039;Everything seemed hopeless, but I still prayed for a breakthrough.&#039;</p>
	</div>
</blockquote>		</div>

		<div class="inner center-text">
			<h2 class="c19">Your generosity makes amazing things happen</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>
</div>
Twig 
<div class="dark-grey-section dark-grey-section--c19 section--overlap-top clearfix">	
	<div class="container">
		<div class="image-quote">

			<picture class="animate-up">
				<source media="(min-width: 1400px)" srcset="{{ image.mobile }}">
				<source media="(min-width: 1200px)" srcset="{{ image.mobile }}">
				<source media="(min-width: 1000px)" srcset="{{ image.mobile }}">
				<source media="(min-width: 800px)" srcset="{{ image.mobile }}">
			  	<source media="(min-width: 647px)" srcset="{{ image.mobile }}">
			 	<source media="(min-width: 465px)" srcset="{{ image.mobile }}">
			 	<source media="(min-width: 375px)" srcset="{{ image.mobile }}" alt="{{ image.alt }}">
			 	<img src="{{ image.mobile }}" alt="{{ image.alt }}">
			</picture>
			{% include 'components/quotes/quote-block' with quote %}
		</div>

		<div class="inner center-text">
			<h2 class="c19">Your generosity makes amazing things happen</h2>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>
</div>
{
    "image": {
        "mobile": "\/images\/mainsite5\/c19\/mobile-image-quote.jpg",
        "desktop": "\/images\/mainsite5\/c19\/desktop-image-quote.jpg",
        "alt": "alt"
    },
    "quote": {
        "colour": "yellow",
        "quote": "'Everything seemed hopeless, but I still prayed for a breakthrough.'"
    }
}
alt

'Everything seemed hopeless, but I still prayed for a breakthrough.'

Your generosity makes amazing things happen

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Accordian {% include 'components/content/accordian' %}
#
HTML 
<div class="accordion accordion--gvt" data-initial-open="true">
             <div class="accordion__item">
            <h3 class="accordion__title">Where can I go?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.&lt;/p&gt;</p>
        </div>
             <div class="accordion__item">
            <h3 class="accordion__title">Where can I go?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.&lt;/p&gt;</p>
        </div>
             <div class="accordion__item">
            <h3 class="accordion__title">Where can I go?</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.&lt;/p&gt;</p>
        </div>
    </div>
Twig 
<div class="accordion accordion--gvt" data-initial-open="true">
    {% for faq in faqs %}
         <div class="accordion__item">
            <h3 class="accordion__title">{{ faq.title }}</h3>
            <p>{{ faq.content }}</p>
        </div>
    {% endfor %}
</div>
{
    "faqs": {
        "0": {
            "title": "Where can I go?",
            "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.<\/p>"
        },
        "1": {
            "title": "Where can I go?",
            "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.<\/p>"
        },
        "2": {
            "title": "Where can I go?",
            "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.<\/p>"
        }
    }
}

Where can I go?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.</p>

Where can I go?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.</p>

Where can I go?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut, obcaecati eveniet. Aperiam est, mollitia quasi nam quod modi suscipit ut saepe similique autem labore animi voluptate natus amet quam.</p>

Paragraph Inline Image Right With Caption {% include 'components/content/paragraph-inline-image-right-with-caption' %}
#
HTML 
<div class="inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<figure class="img-40-right">
		<img src="http://placehold.it/600x400" alt="Image">
		<figcaption class="caption">Caption goes here</figcaption>
	</figure>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig 
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-right">
		<img src="http://placehold.it/600x400" alt="Image">
		<figcaption class="caption">Caption goes here</figcaption>
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image
Caption goes here

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph Inline Image Right {% include 'components/content/paragraph-inline-image-right' %}
#
HTML 
<div class="inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<figure class="img-40-right">
		<img src="http://placehold.it/600x400" alt="Image">
	</figure>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig 
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-right">
		<img src="http://placehold.it/600x400" alt="Image">
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Responsive Video {% include 'components/content/responsive-video' %}
#

Use this code to ensure video's work properly on all screen sizes.

HTML 
<div class="inner">
	<!-- RESPONSIVE VIDEO CODE -->
	<div class="rwd-video">
		<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/fqhVK4EtPR4" frameborder="0" allowfullscreen=""></iframe>
	</div>
	<!-- END RESPONSIVE VIDEO CODE -->
</div>
Twig 
<div class="inner">
	<!-- RESPONSIVE VIDEO CODE -->
	<div class="rwd-video">
		<iframe class="video" width="560" height="315" src="{{video_url}}" frameborder="0" allowfullscreen=""></iframe>
	</div>
	<!-- END RESPONSIVE VIDEO CODE -->
</div>
{
    "video_url": "https:\/\/www.youtube.com\/embed\/fqhVK4EtPR4"
}
Paragraph Inline Image Left {% include 'components/content/paragraph-inline-image-left' %}
#
HTML 
<div class="inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<figure class="img-40-left">
		<img src="http://placehold.it/600x400" alt="Image">
	</figure>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig 
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-left">
		<img src="http://placehold.it/600x400" alt="Image">
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Section {% include 'components/content/image-section' %}
#
HTML 
<section class="image-section image-section--mobile-white full-banner--image" data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg">
	<div class="inner">
		<h1>Image section</h1>	
	</div>
</section>
Twig 
<section class="image-section image-section--mobile-white full-banner--image" data-image="/slider/feature-banner.jpg" data-mobile-image="/slider/mobile-feature.jpg">
	<div class="inner">
		<h1>Image section</h1>	
	</div>
</section>
{}

Image section

Paragraph Article {% include 'components/content/paragraph-article' %}
#

This text sits within the 'article-inner' class. This is how all stories will be formatted on the site.

HTML 
<div class="article-inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig 
<div class="article-inner">
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tooltip Inline {% include 'components/content/tooltip-inline' %}
#
HTML 
This is a sentence with a <span class="tooltip-inline" title="This is the definition">tooltip</span>.
Twig 
This is a sentence with a <span class="tooltip-inline" title="This is the definition">tooltip</span>.
{}
This is a sentence with a tooltip.
Intro Overlap Header {% include 'components/content/intro-overlap-header' %}
#
HTML 
<div class="banner-overlap">
	<div class="inner">
		<h2 class="no-margin">LOREM IPSUM</h2>
	</div>
</div>
Twig 
<div class="banner-overlap">
	<div class="inner">
		<h2 class="no-margin">LOREM IPSUM</h2>
	</div>
</div>
{}
Paragraph Inline Image Left With Caption {% include 'components/content/paragraph-inline-image-left-with-caption' %}
#
HTML 
<div class="inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<figure class="img-40-left">
		<img src="http://placehold.it/600x400" alt="Image">
		<figcaption class="caption">Caption goes here</figcaption>
	</figure>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig 
<div class="inner">
	<p>{{para_one}}</p>
	<figure class="img-40-left">
		<img src="http://placehold.it/600x400" alt="Image">
		<figcaption class="caption">Caption goes here</figcaption>
	</figure>
	<p>{{para_two}}</p>
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image
Caption goes here

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs {% include 'components/content/tabs' %}
#
HTML 
<div class="inner">
	<div class="tabbed-header">
		<div class="inner">
		</div>
	</div>
	<div class="tabbed-container">

					<div class="tabbed__item" data-title="First">
				First content
			</div>
					<div class="tabbed__item" data-title="Second">
				Second content
			</div>
					<div class="tabbed__item" data-title="Third">
				Third content
			</div>
					<div class="tabbed__item" data-title="Fourth">
				Fourth content
			</div>
		
	</div>
</div>
Twig 
<div class="inner">
	<div class="tabbed-header">
		<div class="inner">
		</div>
	</div>
	<div class="tabbed-container">

		{% for tab in tabs %}
			<div class="tabbed__item" data-title="{{ tab.title }}">
				{{ tab.content }}
			</div>
		{% endfor %}

	</div>
</div>
{
    "tabs": {
        "0": {
            "title": "First",
            "content": "First content"
        },
        "1": {
            "title": "Second",
            "content": "Second content"
        },
        "2": {
            "title": "Third",
            "content": "Third content"
        },
        "3": {
            "title": "Fourth",
            "content": "Fourth content"
        }
    }
}
First content
Second content
Third content
Fourth content
Promo Triple Grey {% include 'components/content/promo-triple~grey' %}
#
HTML 
 <div class="grey-section"> 	<div class="inner">
		<div class="promo-triple">

			
				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
					</div>
				</div>

			
				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
					</div>
				</div>

			
				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					</div>
				</div>

			
		</div>
	</div>
</div>
Twig 
{% if promo_background %} <div class="grey-section"> {% endif %}
	<div class="inner">
		<div class="promo-triple">

			{% for promo in promo_boxes %}

				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>{{ promo }}</p>
					</div>
				</div>

			{% endfor %}

		</div>
	</div>
</div>

{
    "promo_boxes": {
        "0": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "1": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.",
        "2": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    },
    "promo_background": "grey"
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Reveal {% include 'components/content/reveal' %}
#
HTML 
<div class="reveal">
	<a class="button reveal__button" href="javascript:void()" data-reveal="reveal1">Click to reveal</a>
	<div class="reveal__element reveal__element--collapsed" data-reveal="reveal1">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.
		</p>
	</div>
</div>
Twig 
<div class="reveal">
	<a class="button reveal__button" href="javascript:void()" data-reveal="{{reveal_id}}">{{reveal_button}}</a>
	<div class="reveal__element reveal__element--collapsed" data-reveal="{{reveal_id}}">
		<p>
			{{reveal_content}}
		</p>
	</div>
</div>
{
    "reveal_button": "Click to reveal",
    "reveal_id": "reveal1",
    "reveal_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula."
}
Click to reveal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt eget arcu vel lobortis. Nullam massa quam, auctor sed gravida quis, mattis et ante. Vestibulum consequat maximus laoreet. In pulvinar pulvinar diam non lacinia. Donec lorem eros, ullamcorper ac sem sed, eleifend accumsan neque. Pellentesque tristique nulla vitae consectetur cursus. Proin tristique arcu ut tincidunt commodo. Mauris ac lobortis est. Integer vel mauris vel urna pulvinar vulputate. Etiam eros erat, tincidunt eu aliquam id, porttitor ac mi. Praesent et felis fringilla, convallis sapien sit amet, fringilla eros. Donec tincidunt, augue vel ultrices consequat, ex erat vulputate urna, non consequat quam risus nec ligula.

Text Video {% include 'components/content/text-video' %}
#
HTML 
<div class="inner">
	<div class="large-col-7">
		Test
	</div>
	<div class="large-col-5">
		Video
	</div>
</div>
Twig 
<div class="inner">
	<div class="large-col-7">
		{{ video_section.content }}
	</div>
	<div class="large-col-5">
		{{ video_section.video }}
	</div>
</div>
{
    "video_section": {
        "content": "Test",
        "video": "Video"
    }
}
Test
Video
Promo Triple {% include 'components/content/promo-triple' %}
#
HTML 
	<div class="inner">
		<div class="promo-triple">

			
				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
					</div>
				</div>

			
				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
					</div>
				</div>

			
				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					</div>
				</div>

			
		</div>
	</div>
</div>
Twig 
{% if promo_background %} <div class="grey-section"> {% endif %}
	<div class="inner">
		<div class="promo-triple">

			{% for promo in promo_boxes %}

				<div class="promo-triple__col">
					<div class="promo-triple__content">
						<p>{{ promo }}</p>
					</div>
				</div>

			{% endfor %}

		</div>
	</div>
</div>

{
    "promo_boxes": {
        "0": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
        "1": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.",
        "2": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paragraph {% include 'components/content/paragraph' %}
#

Standard format for paragraph text on pages.

HTML 
<div class="inner">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Twig 
<div class="inner">
	<p>{{para_one}}</p>
	<p>{{para_two}}</p>
</div>
{
    "para_one": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "para_two": "Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.