Articles
#
Article Action {% include 'components/articles/article-action' %}
#
HTML 
	<div class="article-action ">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>Act</span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
							<a href="#" class="secondary-button">Act</a>
					</div>
	</div>
Twig 
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "button",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

Act
Article Action Share {% include 'components/articles/article-action~share' %}
#
HTML 
	<div class="article-action ">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>Act</span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
							<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
					</div>
	</div>
Twig 
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "social",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

Article Action Background {% include 'components/articles/article-action~background' %}
#
HTML 
<div class="fullwidth-banner fullwidth-banner--article-action" data-image="/slider/photo4.jpg">
	<div class="article-action article-action--image">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>Act</span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
							<a href="#" class="secondary-button">Act</a>
					</div>
	</div>
</div>
Twig 
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "button",
    "article_action_url": "#",
    "article_action_button": "Act",
    "article_action_background_image": "\/slider\/photo4.jpg"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

Act
Article Action Form {% include 'components/articles/article-action~form' %}
#
HTML 
	<div class="article-action ">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>Act</span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
							<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
					</div>
	</div>
Twig 
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "form",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

FORM HERE
Act
Author Share {% include 'components/articles/author-share' %}
#
HTML 
<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
							<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="http://placehold.it/200x200">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">Mark Lang</div>
						<div class="author-bio__info-about">
							Part of the Tearfund digital team - making a supporters day awesome
							<div class="author-bio__link"><a href="#">Read more from Mark</a></div>
						</div>
					</div>
				</div>
						<div class="inline-share-buttons inline-share-buttons__author">
			    <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
			    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</div>
Twig 
<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
			{% if article_end_has_author %}
				<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="{{ article_end_avatar }}">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">{{ article_end_author }}</div>
						<div class="author-bio__info-about">
							{{ article_end_summary }}
							<div class="author-bio__link"><a href="{{ article_end_url }}">Read more from Mark</a></div>
						</div>
					</div>
				</div>
			{% endif %}
			<div class="inline-share-buttons {% if article_end_has_author %}inline-share-buttons__author{% endif %}">
			    <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
			    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</div>
{
    "article_end_author": "Mark Lang",
    "article_end_summary": "Part of the Tearfund digital team - making a supporters day awesome",
    "article_end_url": "#",
    "article_end_avatar": "http:\/\/placehold.it\/200x200",
    "article_end_has_author": true
}
Mark Lang
Part of the Tearfund digital team - making a supporters day awesome
Read more from Mark
Article Related {% include 'components/articles/article-related' %}
#
HTML 
<div class="grey-section border-both">
	<div class="article-inner">
		<h4 class="related-stories-title">Related Stories</h4>

		
			<div class="related-stories">
				<div class="related-story">
					<div class="related-story__image-container">
						<div class="related-story__image circular-image">
							<a href="#"><img src="http://placehold.it/160x160"><div class="circular-image-hover"><div class="circular-image-hover__read">Read</div></div></a>
						</div>
					</div>
					<div class="related-story__content">
						<h1 class="related-story__header animate"><a href="#">Without Tearfund’s help we wouldn’t have survived</a></h1>
						<div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on Jan 15th 2015 by Mark Lang</div>
							<div class="related-story__author-image circular-image"><img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200"></div>
						</div>
					</div>
				</div>
			</div>

		
			<div class="related-stories">
				<div class="related-story">
					<div class="related-story__image-container">
						<div class="related-story__image circular-image">
							<a href="#"><img src="http://placehold.it/160x160"><div class="circular-image-hover"><div class="circular-image-hover__read">Read</div></div></a>
						</div>
					</div>
					<div class="related-story__content">
						<h1 class="related-story__header animate"><a href="#">Without Tearfund’s help we wouldn’t have survived</a></h1>
						<div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on Jan 15th 2015 by Mark Lang</div>
							<div class="related-story__author-image circular-image"><img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200"></div>
						</div>
					</div>
				</div>
			</div>

		
			<div class="related-stories">
				<div class="related-story">
					<div class="related-story__image-container">
						<div class="related-story__image circular-image">
							<a href="#"><img src="http://placehold.it/160x160"><div class="circular-image-hover"><div class="circular-image-hover__read">Read</div></div></a>
						</div>
					</div>
					<div class="related-story__content">
						<h1 class="related-story__header animate"><a href="#">Without Tearfund’s help we wouldn’t have survived</a></h1>
						<div class="related-story__summary">Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on Jan 15th 2015 by Mark Lang</div>
							<div class="related-story__author-image circular-image"><img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200"></div>
						</div>
					</div>
				</div>
			</div>

				
	</div>
</div>
Twig 
<div class="grey-section border-both">
	<div class="article-inner">
		<h4 class="related-stories-title">{{ related_stories_title }}</h4>

		{% for story in related_stories %}

			<div class="related-stories">
				<div class="related-story">
					<div class="related-story__image-container">
						<div class="related-story__image circular-image">
							<a href="{{ story.url }}"><img src="{{ story.thumbnail }}"><div class="circular-image-hover"><div class="circular-image-hover__read">Read</div></div></a>
						</div>
					</div>
					<div class="related-story__content">
						<h1 class="related-story__header animate"><a href="{{ story.url }}">{{ story.title }}</a></h1>
						<div class="related-story__summary">{{ story.summary }}</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on {{ story.date }} by {{ story.author }}</div>
							<div class="related-story__author-image circular-image"><img class="social-share-sticky__avatar-image" src="{{ story.author_image }}"></div>
						</div>
					</div>
				</div>
			</div>

		{% endfor %}
		
	</div>
</div>
{
    "related_stories_title": "Related Stories",
    "related_stories": {
        "0": {
            "title": "Without Tearfund\u2019s help we wouldn\u2019t have survived",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "date": "Jan 15th 2015",
            "author": "Mark Lang",
            "author_image": "http:\/\/placehold.it\/200x200",
            "thumbnail": "http:\/\/placehold.it\/160x160",
            "url": "#"
        },
        "1": {
            "title": "Without Tearfund\u2019s help we wouldn\u2019t have survived",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "date": "Jan 15th 2015",
            "author": "Mark Lang",
            "author_image": "http:\/\/placehold.it\/200x200",
            "thumbnail": "http:\/\/placehold.it\/160x160",
            "url": "#"
        },
        "2": {
            "title": "Without Tearfund\u2019s help we wouldn\u2019t have survived",
            "summary": "Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150",
            "date": "Jan 15th 2015",
            "author": "Mark Lang",
            "author_image": "http:\/\/placehold.it\/200x200",
            "thumbnail": "http:\/\/placehold.it\/160x160",
            "url": "#"
        }
    }
}

Related Stories

Read

Without Tearfund’s help we wouldn’t have survived

Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150
Posted on Jan 15th 2015 by Mark Lang
Read

Without Tearfund’s help we wouldn’t have survived

Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150
Posted on Jan 15th 2015 by Mark Lang
Read

Without Tearfund’s help we wouldn’t have survived

Sher Bahadur Sole and his wife Thuli survived the Nepal earthquake but their lives were left hanging by a thread in the awful aftermath. Max Chrac 150
Posted on Jan 15th 2015 by Mark Lang
Author Share No Author {% include 'components/articles/author-share~no-author' %}
#
HTML 
<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
						<div class="inline-share-buttons ">
			    <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
			    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</div>
Twig 
<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
			{% if article_end_has_author %}
				<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="{{ article_end_avatar }}">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">{{ article_end_author }}</div>
						<div class="author-bio__info-about">
							{{ article_end_summary }}
							<div class="author-bio__link"><a href="{{ article_end_url }}">Read more from Mark</a></div>
						</div>
					</div>
				</div>
			{% endif %}
			<div class="inline-share-buttons {% if article_end_has_author %}inline-share-buttons__author{% endif %}">
			    <a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
			    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
</div>
{
    "article_end_author": "Mark Lang",
    "article_end_summary": "Part of the Tearfund digital team - making a supporters day awesome",
    "article_end_url": "#",
    "article_end_avatar": "http:\/\/placehold.it\/200x200",
    "article_end_has_author": false
}
Article Action Complete {% include 'components/articles/article-action~complete' %}
#
HTML 
	<div class="article-action ">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>Act</span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.</p>
							<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
					</div>
	</div>
Twig 
{% if article_action_background_image %}<div class="fullwidth-banner fullwidth-banner--article-action" data-image="{{ article_action_background_image }}">
{% endif %}
	<div class="article-action {% if article_action_background_image %}article-action--image{% endif %}">
		<div class="article-action__content">
			<h3 class="article-action__heading"><span>{{ article_action_title }}</span></h3>
			<p>{{ article_action_text }}</p>
			{% if article_action_type == "button" %}
				<a href="{{ article_action_url }}" class="secondary-button">{{ article_action_button }}</a>
			{% elseif  article_action_type == "social" %}
				<div class="inline-share-buttons">
					<a class="social-share__link social-share__link--facebook share-button-facebook" href="#" target="_blank">Share on Facebook</a>
				    <a class="social-share__link social-share__link--twitter share-button-twitter" href="#" target="_blank">Share on Twitter</a>
				</div>
			{% elseif article_action_type == "form" %}
				<div class="article-action__reveal">
					<div>FORM HERE</div>
					<button class="button" type="input">Submit</button>
				</div>
				<a href="javascript:void(0)" class="secondary-button article-action__reveal-button">Act</a>
			{% elseif article_action_type == "complete" %}
				<h3 class="article-action__heading">THANK YOU FOR ACTING WITH US</h3>
			{% endif %}
		</div>
	</div>
{% if article_action_background_image %}</div>{% endif %}
{
    "article_action_title": "Act",
    "article_action_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.",
    "article_action_type": "complete",
    "article_action_url": "#",
    "article_action_button": "Act"
}

Act

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at eros lacus. Aenean dapibus odio quis ex tristique tincidunt.

THANK YOU FOR ACTING WITH US