Skip links and keyboard navigation

For government has transitioned to using the Queensland Government design system. If you have feedback, please use the form at the bottom of this page.

Learn more

SWE components

Promotional banner

On this page

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>
Last updated:
28 June 2024