Callout

v4.0.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 @gold.au/callout
Tags
Requires
Contributors
  • Julian Fleetwood avatar picture
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Simon Pascal Klein avatar picture
  • Alex Page 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 '@gold.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 '@gold.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 '@gold.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"
/>

Related components

Feedback