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