Primer

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