Skip links and keyboard navigation

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.

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.

Mobile apps

Browse through Queensland Government mobile apps.

Mobile apps

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.

Subscribe for CAVI updates

Be the first to know about Cooperative and Automated Vehicle Initiative (CAVI) public events and opportunities to participate in our public trials.

Subscribe

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>