Social Share Sticky {% include 'components/blog/social-share-sticky' %}
HTML
<div class="social-share-sticky" style="position:relative">
<div class="article-inner">
<div class="social-share-sticky__author">
<div class="social-share-sticky__author-avatar circular-image">
<img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
</div>
<div class="social-share-sticky__author-name">
Posted by Mark Lang - 4 mins
</div>
</div>
<div class="social-share-sticky__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>
<a class="social-share__link social-share__link--print share-button-print" href="#" target="_blank">Print</a>
</div>
</div>
</div>
Twig
<div class="social-share-sticky" style="position:relative">
<div class="article-inner">
<div class="social-share-sticky__author">
<div class="social-share-sticky__author-avatar circular-image">
<img class="social-share-sticky__avatar-image" src="http://placehold.it/200x200">
</div>
<div class="social-share-sticky__author-name">
Posted by {{ author }} - {{ read_time }}
</div>
</div>
<div class="social-share-sticky__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>
<a class="social-share__link social-share__link--print share-button-print" href="#" target="_blank">Print</a>
</div>
</div>
</div>
{
"avatar": "http:\/\/placehold.it\/200x200",
"author": "Mark Lang",
"read_time": "4 mins",
"bio": "Part of the Tearfund digital team - making a supporters day awesome"
}