Related
Related Articles Image {% include 'components/related/related-articles~image' %}
HTML
<div class="related-articles">
<div class="inner">
<h2 class="related-articles__title">More like this</h2>
<div class="large-row">
<div class="large-col-4">
<article class="related-article">
<a href="#">
<img class="related-article__image" src="http://placehold.it/400x225">
</a>
<h1 class="related-article__title">Title of article</h1>
<div class="related-article__byline byline">by <span class="author">Author Name</span></div>
<p class="related-article__description">Short text</p>
<a href="#">Continue Reading</a>
</article>
</div>
<div class="large-col-4">
<article class="related-article">
<a href="#">
<img class="related-article__image" src="http://placehold.it/400x225">
</a>
<h1 class="related-article__title">Title of article</h1>
<div class="related-article__byline byline">by <span class="author">Author Name</span></div>
<p class="related-article__description">Summary text here, which will be the first 20 - 30 words of this post ie you know something...</p>
<a href="#">Continue Reading</a>
</article>
</div>
<div class="large-col-4">
<article class="related-article">
<a href="#">
<img class="related-article__image" src="http://placehold.it/400x225">
</a>
<h1 class="related-article__title">Title of article</h1>
<div class="related-article__byline byline">by <span class="author">Author Name</span></div>
<p class="related-article__description">Short text</p>
<a href="#">Continue Reading</a>
</article>
</div>
</div>
</div>
</div>
Twig
<div class="related-articles">
<div class="inner">
<h2 class="related-articles__title">{{ related_title }}</h2>
<div class="large-row">
{% for related_article in related_articles %}
<div class="large-col-4">
<article class="related-article">
{% if related_article.image %}
<a href="{{ related_article.url }}">
<img class="related-article__image" src="{{ related_article.image }}">
</a>
{% endif %}
<h1 class="related-article__title">{{ related_article.title }}</h1>
<div class="related-article__byline byline">by <span class="author">{{ related_article.author }}</span></div>
<p class="related-article__description">{{ related_article.summary }}</p>
<a href="{{ related_article.url }}">{{ related_article.link_text }}</a>
</article>
</div>
{% endfor %}
</div>
</div>
</div>{
"related_title": "More like this",
"related_articles": {
"0": {
"title": "Title of article",
"author": "Author Name",
"summary": "Short text",
"url": "#",
"link_text": "Continue Reading",
"image": "http:\/\/placehold.it\/400x225"
},
"1": {
"title": "Title of article",
"author": "Author Name",
"summary": "Summary text here, which will be the first 20 - 30 words of this post ie you know something...",
"url": "#",
"link_text": "Continue Reading",
"image": "http:\/\/placehold.it\/400x225"
},
"2": {
"title": "Title of article",
"author": "Author Name",
"summary": "Short text",
"url": "#",
"link_text": "Continue Reading",
"image": "http:\/\/placehold.it\/400x225"
}
}
}More like this
Related Stories {% include 'components/related/related-stories' %}
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"
}
}
}Related Articles {% include 'components/related/related-articles' %}
HTML
<div class="related-articles">
<div class="inner">
<h2 class="related-articles__title">More like this</h2>
<div class="large-row">
<div class="large-col-4">
<article class="related-article">
<h1 class="related-article__title">Title of article</h1>
<div class="related-article__byline byline">by <span class="author">Author Name</span></div>
<p class="related-article__description">Short text</p>
<a href="#">Continue Reading</a>
</article>
</div>
<div class="large-col-4">
<article class="related-article">
<h1 class="related-article__title">Title of article</h1>
<div class="related-article__byline byline">by <span class="author">Author Name</span></div>
<p class="related-article__description">Summary text here, which will be the first 20 - 30 words of this post ie you know something...</p>
<a href="#">Continue Reading</a>
</article>
</div>
<div class="large-col-4">
<article class="related-article">
<h1 class="related-article__title">Title of article</h1>
<div class="related-article__byline byline">by <span class="author">Author Name</span></div>
<p class="related-article__description">Short text</p>
<a href="#">Continue Reading</a>
</article>
</div>
</div>
</div>
</div>
Twig
<div class="related-articles">
<div class="inner">
<h2 class="related-articles__title">{{ related_title }}</h2>
<div class="large-row">
{% for related_article in related_articles %}
<div class="large-col-4">
<article class="related-article">
{% if related_article.image %}
<a href="{{ related_article.url }}">
<img class="related-article__image" src="{{ related_article.image }}">
</a>
{% endif %}
<h1 class="related-article__title">{{ related_article.title }}</h1>
<div class="related-article__byline byline">by <span class="author">{{ related_article.author }}</span></div>
<p class="related-article__description">{{ related_article.summary }}</p>
<a href="{{ related_article.url }}">{{ related_article.link_text }}</a>
</article>
</div>
{% endfor %}
</div>
</div>
</div>{
"related_title": "More like this",
"related_articles": {
"0": {
"title": "Title of article",
"author": "Author Name",
"summary": "Short text",
"url": "#",
"link_text": "Continue Reading"
},
"1": {
"title": "Title of article",
"author": "Author Name",
"summary": "Summary text here, which will be the first 20 - 30 words of this post ie you know something...",
"url": "#",
"link_text": "Continue Reading"
},
"2": {
"title": "Title of article",
"author": "Author Name",
"summary": "Short text",
"url": "#",
"link_text": "Continue Reading"
}
}
}