Promotional banner
Overview
Use the promotional banner component to display and highlight promotional information on your page.
The first column is restricted to a title, brief text description and call-to-action button. The second column can contain any content that is fit-for-purpose, see examples below.
With a group of button links
To apply an outline button style to a group of links use a <section> element with the class .qg-promotional-banner__popular-apps-tags and an unordered list of <a> elements.
Code
<section class="qg-promotional-banner__container">
<div class="wrapper qg-site-width container-fluid">
<div class="qg-promotional-banner__info col-12 col-sm-6">
<h2>Mobile apps</h2>
<p>Browse through Queensland Government mobile apps.</p>
<a href="https://www.qld.gov.au/services/mobile" class="qg-btn btn-primary mt-2">Mobile apps</a>
</div>
<div class="qg-promotional-banner__popular-apps col-12 col-sm-6">
<p class="qg-promotional-banner__popular-apps-title">Featured section</p>
<section class="qg-promotional-banner__popular-apps-tags">
<ul>
<li><a href="#">Check In Qld</a></li>
<li><a href="#">MyTransLink</a></li>
<li><a href="#">QLDTraffic</a></li>
<li><a href="#">Queensland Learner Logbook</a></li>
<li><a href="#">Weed Spotter</a></li>
</ul>
</section>
</div>
</div>
</section>
With an image
The recommended minimum image width is 652 pixels.
Code
<section class="qg-promotional-banner__container">
<div class="wrapper qg-site-width container-fluid">
<div class="qg-promotional-banner__info col-12 col-sm-6">
<h2>Subscribe for CAVI updates</h2>
<p>Be the first to know about Cooperative and Automated Vehicle Initiative (CAVI) public events and opportunities to participate in our public trials.</p>
<a href="#" class="qg-btn btn-primary mt-2">Subscribe</a>
</div>
<div class="qg-promotional-banner__popular-apps col-12 col-sm-6">
<p><img src="https://picsum.photos/652/357" class="img-fluid" alt="" width="652" height="367"></p>
</div>
</div>
</section>