Promotion heading
© Image credits
Description about promotion.
Promotional tile
Overview
Use the promotional tile component to display promotional items. Preferably shown at the bottom of topic index pages.
Default
Code
<section class="qg-promotional-content">
<div class="row">
<div class="col-lg-4 col-sm-6">
<article class="promotions">
<h2>Promotion heading</h2>
<div class="figure">
<img src="http://via.placeholder.com/702x395.png/ccc/ccc" class="promotion-image">
<p class="caption">© Image credits</p>
</div>
<p class="description">Description about promotion.</p>
<p class="more">
<a href="" title="Link to promotion details">More…</a>
</p>
</article>
</div>
<div class="col-lg-4 col-sm-6">
<article class="promotions">
<h2>Promotion heading</h2>
<div class="figure">
<img src="http://via.placeholder.com/702x395.png/ccc/ccc" class="promotion-image">
<p class="caption">© Image credits</p>
</div>
<p class="description">Description about promotion.</p>
<p class="more">
<a href="" title="Link to promotion details">More…</a>
</p>
</article>
</div>
<div class="col-lg-4 col-sm-6">
<article class="promotions">
<h2>Promotion heading</h2>
<div class="figure">
<img src="http://via.placeholder.com/702x395.png/ccc/ccc" class="promotion-image">
<p class="caption">© Image credits</p>
</div>
<p class="description">Description about promotion.</p>
<p class="more">
<a href="" title="Link to promotion details">More…</a>
</p>
</article>
</div>
</div>
</section>