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.
<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>
This variation doesn't have a left border so that it is distinguishable from the alert (information) component.
<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>
<!--
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>
<!--
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>