Primer

HTML

<div class="grey-section border-both">
	<div class="inner">
		<div class="footsteps-options">
			<div class="footsteps-options__row">
				<div class="footsteps-options__col footsteps-options__col--left">
					<h2 class="footsteps-options__header">Footsteps title</h2>
					<p>OVERVIEW TEXT</p>
				</div>
				<div class="footsteps-options__col footsteps-options__col--right">
					<a href="CUSTOM UPLOADED MEDIA URL" target="_blank" class="secondary-button" download="2017-Tearfund-Footsteps-101-Caring-for-orphans-En">Download</a>
					<a href="CUSTOM SHOPIFY URL" target="_blank" class="secondary-button">Buy printed copies</a>
					<a href="http://www.facebook.com/sharer.php?u=PAGE_URL" target="_blank" class="secondary-button">share</a>
				</div>
			</div>
		</div>
	</div>
</div>

Twig

<div class="grey-section border-both">
	<div class="inner">
		<div class="footsteps-options">
			<div class="footsteps-options__row">
				<div class="footsteps-options__col footsteps-options__col--left">
					<h2 class="footsteps-options__header">{{footsteps_title}}</h2>
					<p>OVERVIEW TEXT</p>
				</div>
				<div class="footsteps-options__col footsteps-options__col--right">
					<a href="CUSTOM UPLOADED MEDIA URL" target="_blank" class="secondary-button" download="2017-Tearfund-Footsteps-101-Caring-for-orphans-En">Download</a>
					<a href="CUSTOM SHOPIFY URL" target="_blank" class="secondary-button">Buy printed copies</a>
					<a href="http://www.facebook.com/sharer.php?u=PAGE_URL" target="_blank" class="secondary-button">share</a>
				</div>
			</div>
		</div>
	</div>
</div>

{
    "footsteps_title": "Footsteps title",
    "footsteps_overview": "Overview"
}

OVERVIEW TEXT

Download Buy printed copies share