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

v2.1.0

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
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture

Default

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

Example

<!--
  Light:  <p class="au-callout">
  Dark:   <p class="au-callout au-callout--dark">
-->

<p class="au-callout" aria-label="Callout description1">
  A callout.
</p>
/*
  Light:  <AUcalloutCalendar>
  Dark:   <AUcalloutCalendar dark>
*/

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

<AUcallout description="description for first callout">
  A callout.
</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" aria-label="Callout calendar">
  <span class="au-callout--calendar-event__lede">The next public holiday is:</span>
  <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
  description="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"
/>