Skip to main content

Callout

Last updated:
11/15/2023

A callout is a display text style that emphasizes a short line of text. Callouts are different from headings and are used for marketing content.

View in Storybook

Default callout

Modifiers

Center-aligned

The callout can be center-aligned. The callout’s decorative bar is centered along with the text. The alignment of the callout should depend on the page layout.

Center aligned callout

Styles

Default

The default callout is left-aligned.

Default callout

Default callout

Usage

The callout style is a display text style. This means that the callout has no semantic value and does not disrupt the heading structure of the page.

Do:

  • Use for short lines of text
  • Use once per page

Don't:

  • Use in place of a heading element
  • Use for long or multiple lines of text
  • Use multiple times on a page

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards, usage guidelines, and content guidelines to ensure that the checkbox is fully accessible.