Callout

Communicate important information through a strong visual emphasis.

Code examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<GoACallout type="information">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</GoACallout>

type

success | important | information | emergency | event

Define the context and colour of the callout

headingstring

Callout heading text

sizemedium | large

The medium callout has reduced padding and type size to adjust for a compact area and smaller viewport width when a smaller size is required. Defaults to large.

maxWidthstring

Sets the maximum width of the callout.

ariaLiveoff | polite | assertive

Indicates how assistive technology should handle updates to the live region. Defaults to off.

testIdstring

Sets the data-testid attribute. Used with ByTestId queries in tests.

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Confirm that an application was submitted

You have completed the application

You will receive a copy of the confirmation to the email person@email.com

Confirmation number: 1234ABC

Go back to the dashboard, or direct your user somewhere else useful.

Other information about what was just completed, other tertiary information, and/or contact information.
Phone: 780 123 4567
Email: information@gov.ab.ca

Go to application

Back to dashboard

<h2>You have completed the application</h2>

<GoACallout type="success" heading="Your application was successful">
  <p>You will receive a copy of the confirmation to the email person@email.com</p>
  <p>Confirmation number: <strong>1234ABC</strong></p>
</GoACallout>

<h3>Go back to the dashboard, or direct your user somewhere else useful.</h3>
<p>
  Other information about what was just completed, other tertiary information, and/or contact information.
  Phone: <a href="tel:7801234567">780 123 4567</a>
  Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
</p>

<GoAButtonGroup alignment="start">
  <GoAButton type="primary">Go to application</GoAButton>
  <GoAButton type="secondary">Back to dashboard</GoAButton>
</GoAButtonGroup>

Design guidelines

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Callout

Component

Communicate important information through a strong visual emphasis.

Component

Properties

Examples

Confirm that an application was submitted

You have completed the application

Go back to the dashboard, or direct your user somewhere else useful.