Callout
v4.0.0Callouts 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
React Usage
import { AUcallout, AUcalloutCalendar } from '@gold.au/callout';
<AUcallout title="Title of callout">
<p>Description of callout</p>
</AUcallout>
<AUcalloutCalendar
title="Title of callout"
datetime="2017-01-01T00:00:00+00:00"
time="Sunday 32 Jun"
subline="Your next appointment is"
name="Talk to boss"
/>Props
Callout
| Prop name | Type | Description |
|---|---|---|
| title | string | Title of the callout |
| dark | boolean | A dark variation of the component |
| srOnlyTitle | boolean | Make title screen reader visible |
All other props are spread into the component
Callout Calendar
| Prop name | Type | Description |
|---|---|---|
| title | string | Title of the callout |
| datetime | string | The date time string |
| time | string | The same date but human readable |
| subline | string | Your subline, optional |
| name | object | The name of the event, optional |
| dark | boolean | A dark variation of the component |
| srOnlyTitle | boolean | Make title screen reader visible |
All other props are spread into the component
Exports
| Name | Type | Description |
|---|---|---|
AUcallout |
named | The callout component |
AUcalloutCalender |
named | The callout calendar component |
node_modules import
import { AUcallout, AUcalloutCalendar } from '@gold.au/callout';pancake import
import { AUcallout, AUcalloutCalendar } from './callout';