Callout | Parsley Design System

Examples

Variations:

Critical

An example of a callout that contains relevant information to convey to the user.

Warning

An example of a callout that contains relevant information to convey to the user.

Information

An example of a callout that contains relevant information to convey to the user.

Neutral

An example of a callout that contains relevant information to convey to the user.

Code

1<Callout variation="critical">...</Callout>
2<Callout variation="warning">...</Callout>
3<Callout variation="information">...</Callout>
4<Callout variation="neutral">...</Callout>

With a heading:

Heading content display with prominence

An example of a callout that contains relevant information to convey to the user.

Code

1<Callout variation="critical" heading="Heading content display with prominence">...</Callout>

Different sizes:

Heading content display with prominence

An example of a callout that contains relevant information to convey to the user.

Heading content display with prominence

An example of a callout that contains relevant information to convey to the user.

Heading content display with prominence

An example of a callout that contains relevant information to convey to the user.

Code

1<Callout variation="information" size="small" heading="Heading content display with prominence">...</Callout>
2<Callout variation="information" heading="Heading content display with prominence">...</Callout>
3<Callout variation="information" size="large" heading="Heading content display with prominence">...</Callout>

Maximum width set:

Default is for a maximum width of 80 characters for optimal readability.

80 characters

An example of a callout that contains relevant information to convey to the user.

Width 100%

An example of a callout that contains relevant information to convey to the user.

Code

1<Callout variation="warning">...</Callout>
2<Callout variation="warning" maxWidth="none">...</Callout>

With actions:

There is an upcoming payment on your account due 23rd August, to avoid a late payment fee you can:

Code

1<Callout variation="warning">
2    <Text as="p">There is an upcoming payment on your account due 23rd August, to avoid a late payment fee you can:</Text>
3    <Divider />
4    <Cluster gap="--s0">
5        <Button onClick={() => {}} variation="secondary" borderWidth="small">Send me a reminder</Button>
6        <Button onClick={() => {}} variation="primary">Make payment now</Button>
7    </Cluster>
8</Callout>

Design

A Callout is static content that has been emphasised and used as a visual clue to draw the eye to the content, they are used to help direct a user's attention to useful pieces of information.

Best practice guidance

Callouts are content. They appear on page on load
Callouts are positioned within main content in close proximity to the relevant information - usually after content.
Can be used within form structures to provide supporting information, however use sparingly.
Use to reiterate important content.
Be polite in callouts — don’t blame the user.
Don’t overdo it. Too many callouts will either overwhelm or annoy the user and are likely to be ignored.
Understand the user’s context. Don’t include callouts that aren’t related to the user’s current goal.

Accessibility considerations

Keep the content succinct and purpose driven.
Ensure the heading level fits within the pages heading hierarchy.
When displaying before the page title (heading level 1) ensure the headingLevel is not output as a heading and instead use a "strong" element.
For alerting users to an important status use: role=”alert”.
Use role="alert" when content becomes inserted into the page content.
Use role="status" when the callout provides advisory information but does not have the same urgency as alerts.
When content is inserted into the content set the focus to this newly inserted content.

Development

Import by:

1import { Notification } from "@parsley_design_systems/design-system"

Available props

Props for the Notification component
Property	Type	Default	Required	Description
children	ReactNode			The content of the component.
heading	string			The heading of the component.
headingLevel	ElementType - oneOf: h2, h3, h4, h5, h6, strong			The heading of the component.
variation	oneOf: 'critical' \| 'information' \| 'warning' \| 'success' \| 'neutral'	neutral	false	Displays the variation style.
size	oneOf: default \| small \| large	default	false	Sets the size of the component. If not set "default" is output as the default setting.
role	string - alert or status	status		The HTML role of the component, use role="alert" when a notifcation is newly inserted into the existing page content.
maxWidth	string	maximum width is set to 80 characters	false	Sets the width to 100%, default is 80 characters for optimal reading.
id	string		false	Allows for a specific id to be set, can be used as a means to set focus.
className	string		false	Allows for specific classNames to be set.