Articles
#
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

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 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 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 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
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
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": "#"
        }
    }
}
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.