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.

View example in Storybook

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.

View example in Storybook

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>