Primer

HTML

<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
							<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="http://placehold.it/200x200">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">Mark Lang</div>
						<div class="author-bio__info-about">
							Part of the Tearfund digital team - making a supporters day awesome
							<div class="author-bio__link"><a href="#">Read more from Mark</a></div>
						</div>
					</div>
				</div>
						<div class="inline-share-buttons inline-share-buttons__author">
			    <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>
</div>

Twig

<div class="article-end-content">
	<div class="article-inner">
		<div class="author-share">
			{% if author  %}
				<div class="author-bio">
					<div class="author-bio__author-avatar circular-image">
						<img class="avatar-image" src="http://placehold.it/200x200">
					</div>
					<div class="author-bio__info">
						<div class="author-bio__info-name">{{ author }}</div>
						<div class="author-bio__info-about">
							{{ bio }}
							<div class="author-bio__link"><a href="#">Read more from {{ author | split(' ', 2)[0] }}</a></div>
						</div>
					</div>
				</div>
			{% endif %}
			<div class="inline-share-buttons {% if author  %}inline-share-buttons__author{% endif %}">
			    <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>
</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"
}