dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Callout

v3.0.2

Callouts are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text. They are used to help direct a user's attention to important pieces of information.

Released

History
View changes
Install
npm i @gov.au/callout
Tags
Requires
Contributors
  • Dominik Wilkowski avatar picture
  • Trevor Brennan avatar picture
  • Julian Fleetwood avatar picture
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Gary Broadbent avatar picture
  • Simon Pascal Klein avatar picture

Default

Use callout to notify and alert users of important snippets of information.

Example

<!--
  Light:  <section class="au-callout">
  Dark:   <section class="au-callout au-callout--dark">
-->
<section class="au-callout">
    <h2 class="au-callout__heading">Title of the callout</h2>
    <p>Description of the callout</p>
</section>
/*
  Light:  <AUcalloutCalendar>
  Dark:   <AUcalloutCalendar dark>
*/

import { AUcallout } from '@gov.au/callout';

<AUcallout title="Title of the callout">
  <p>Description of the callout</p>
</AUcallout>

Callout heading screen reader only

A callout with a heading that can be read by screen readers. Markup for the title is included for screen reader users.

Example

<!--
  Light:  <section class="au-callout">
  Dark:   <section class="au-callout au-callout--dark">
-->
<section class="au-callout">
    <h2 class="au-callout__heading au-callout__heading--sronly">Title of the callout</h2>
    <p>Description of the callout</p>
</section>
/*
  Light:  <AUcalloutCalendar>
  Dark:   <AUcalloutCalendar dark>
*/

import { AUcallout } from '@gov.au/callout';

<AUcallout srOnlyTitle title="Title of the callout">
  <p>Description of the callout</p>
</AUcallout>

Calendar

Use a calendar callout to notify and alert users of important dates and events.

Example

<!--
  Light:  <section class="au-callout au-callout--calendar-event">
  Dark:   <section class="au-callout au-callout--calendar-event au-callout--dark">
-->

<section class="au-callout au-callout--calendar-event">
  <h2 class="au-callout__heading au-callout__heading--sronly">Description of the callout</h2>
  <p class="au-callout--calendar-event__lede">The next public holiday is:</p>
  <time class="au-callout--calendar-event__time" datetime="2017-01-01T00:00:00+00:00">Sunday 1 January</time>
  <span class="au-callout--calendar-event__name">New Year’s Day</span>
</section>
/*
  Light:  <AUcalloutCalendar>
  Dark:   <AUcalloutCalendar dark>
*/

import { AUcalloutCalendar } from '@gov.au/callout';

<AUcalloutCalendar
  title="Callout calendar"
  datetime="2017-01-01T00:00:00+00:00"
  time="Sunday 1 Jan"
  subline="The next public holiday is"
  name="New Year's Day"
/>