Overview

Use the promotional tile component to display promotional items. Preferably shown at the bottom of topic index pages.

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>