Skip links and keyboard navigation

SWE components

Callout

On this page

Overview

Use the callout box to help direct a user’s attention to important pieces of information.

Optionally, an icon can be placed before the callout title.

Default

View example in Storybook

Code

<section class="qg-callout__box qg-callout__grey-theme">
  <div class="qg-callout__header col-12">
    <span class="qg-callout__icon"><span class="fa fa-comments"></span></span>
    <h2 class="qg-callout__title">Callout title</h2>
  </div>

  <div class="qg-callout__content col-12">
    <div class="qg-callout__bottom-alignment">
      <div class="qg-callout__description">
        <p>Callout content</p>
      </div>
    </div>
  </div>
</section>

Blue

This variation doesn't have a left border so that it is distinguishable from the alert (information) component.

View example in Storybook

Code

<section class="qg-callout__box qg-callout__default-theme">
  <div class="qg-callout__content col-12">
    <div class="qg-callout__right-alignment">
      <div class="qg-callout__description">
        <p>Callout content</p>
      </div>
    </div>
  </div>
</section>

With a button

View example in Storybook

Code

<!--
  Left aligned button: <div class="qg-callout__left-alignment"><div class="qg-callout__description">
  Right aligned button: <div class="qg-callout__right-alignment"><div class="qg-callout__description">
  Bottom aligned button: <div class="qg-callout__bottom-alignment"><div class="qg-callout__description">
-->

<section class="qg-callout__box qg-callout__grey-theme">
    <div class="qg-callout__content col-12">
        <div class="qg-callout__right-alignment">
            <div class="qg-callout__description">
                <p>To protect your privacy, we need to verify your identity before you can change your address. Select start to register or login to setup a QGov account.</p>
            </div>
            <a class="qg-btn btn-primary qg-callout__cta" href="#">Start</a>
        </div>
    </div>
</section>

With an image

View example in Storybook

Code

<!--
  Left aligned image: <div class="qg-callout__left-alignment"><div class="qg-callout__description">
  Right aligned image: <div class="qg-callout__right-alignment"><div class="qg-callout__description">
  Bottom aligned image: <div class="qg-callout__bottom-alignment"><div class="qg-callout__description">
-->

<section class="qg-callout__box qg-callout__grey-theme">
    <div class="qg-callout__content col-12">
        <div class="qg-callout__right-alignment">
            <div class="qg-callout__description">
                <div><p>If you are travelling overseas, check with <a href="#">Smartraveller</a>, the Australian Government’s travel advisory service for countries, issues and events that can affect your international holiday. You can register your travel plans, get advice on travel insurance, and subscribe to travel advice updates.</p>
                </div>
            </div>
            <div class="qg-callout__image">
                <img src="https://picsum.photos/100/130" alt="Include alt tag if image is not purely decorative">
            </div>
        </div>
    </div>
</section>
Last updated:
28 June 2024