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">
							<a href="#">Title of article</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 Author Name</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">
							<a href="#">Title of article</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 Author Name</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">
							<a href="#">Title of article</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 Author Name</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</h4>

		{% for related_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="{{ related_story.url }}">
								<img src="{{ related_story.image }}">
								<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">
							<a href="{{ related_story.url }}">{{ related_story.title }}</a>
						</h1>
						<div class="related-story__summary">{{ related_story.summary }}</div>
						<div class="related-story__meta">
							<div class="related-story__post-meta">Posted on {{ related_story.date }} by {{ related_story.author }}</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>

		{% endfor %}

	</div>
</div>

{
    "related_story_title": "Related Stories",
    "related_stories": {
        "0": {
            "title": "Title of article",
            "date": " Jan 15th 2015",
            "author": "Author Name",
            "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",
            "url": "#",
            "image": "http:\/\/placehold.it\/160x160"
        },
        "1": {
            "title": "Title of article",
            "date": " Jan 15th 2015",
            "author": "Author Name",
            "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",
            "url": "#",
            "image": "http:\/\/placehold.it\/160x160"
        },
        "2": {
            "title": "Title of article",
            "date": " Jan 15th 2015",
            "author": "Author Name",
            "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",
            "url": "#",
            "image": "http:\/\/placehold.it\/160x160"
        }
    }
}