Callout
Communicate important information through a strong visual emphasis.
Props
size
medium | 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.
type
emergency | important | information | event | success
Define the context and colour of the callout.
emphasis
high | medium | low
Sets the visual prominence. 'high' for full background, 'medium' for subtle, 'low' for minimal.
Defaults to
medium.
heading
string
Callout heading text.
maxWidth
string
Sets the maximum width of the callout.
Defaults to
none.
testId
string
Sets a data-testid attribute for automated testing.
arialive
off | assertive | polite
Indicates how assistive technology should handle updates to the live region.
Defaults to
off.
icontheme
IconTheme
Sets the icon theme. 'outline' for stroked icons, 'filled' for solid icons.
Defaults to
outline.
version
1 | 2
The design system version for styling purposes.
Defaults to
1.
mt, mr, mb, ml
none | 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
<GoabText as="h1" mt="none">You have completed the application</GoabText>
<GoabCallout type="success" heading="Your application was successful">
<GoabText mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</GoabText>
<GoabText mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></GoabText>
</GoabCallout>
<GoabText as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</GoabText>
<GoabText>
Other information about what was just completed, other tertiary information, and/or contact information.
<br />
Phone: <a href="tel:7801234567">780 123 4567</a>
<br />
Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
</GoabText>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabButton type="primary">Go to application</GoabButton>
<GoabButton type="secondary">Back to dashboard</GoabButton>
</GoabButtonGroup>Result page
<GoabText as="h1" mt="none">You have completed the application</GoabText>
<GoabCallout type="success" heading="Application submitted">
<GoabText size="body-m" mt="none" mb="s">You will receive a copy of the confirmation to the email name@email.com</GoabText>
<GoabText size="body-m" mt="none" mb="none">Your reference number is: <strong>1234ABC</strong></GoabText>
</GoabCallout>
<GoabText as="h2" mt="xl" mb="m">What happens next</GoabText>
<GoabText size="body-m" mt="none" mb="s">We've sent your application to service name. They will contact you to confirm your registration.</GoabText>
<GoabText size="body-m" mt="none" mb="s">You can now close this window.</GoabText>
<GoabText size="body-m" mt="none" mb="s">What did you think of this service? <a href="#">Give feedback</a></GoabText>
<GoabText as="h2" mt="xl" mb="m">If you have questions about your application</GoabText>
<GoabText size="body-m" mt="none" mb="s">Contact the [ministry area].</GoabText>
<GoabText size="body-m" mt="none" mb="s">Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a></GoabText>
<GoabText size="body-m" mt="none" mb="s">Phone: <a href="tel:7801234567">780 123 4567</a></GoabText>
);
}Task list page
<GoabText as="h1" mt="none">Apply for a service</GoabText>
<GoabCallout
type="important"
emphasis="low"
size="medium"
heading="Application incomplete"
mb="2xl"
mt="xl"
maxWidth="360px"
>
You have completed 1 of 3 sections.
</GoabCallout>
<GoabText as="h2">1. Before you start</GoabText>
<GoabTable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">Read terms of use</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="success" content="Completed" ariaLabel="completed" icon={false} />
</td>
</tr>
</tbody>
</GoabTable>
<GoabText as="h2">2. Prepare application</GoabText>
<GoabTable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">Your contact details</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
<tr>
<td>
<a href="#">Your family</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
<tr>
<td>
<a href="#">Verify your identity</a>
</td>
<td className="goa-table-number-column">
<GoabBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
</td>
</tr>
</tbody>
</GoabTable>
<GoabText as="h2" mb="s">3. Schedule service</GoabText>
<GoabText size="body-s" color="secondary" mt="2xs">
You need to complete the previous section before you can start this task.
</GoabText>
<GoabTable width="100%" mt="l" mb="3xl">
<tbody>
<tr>
<td>Receive email confirmation</td>
<td className="goa-table-number-column">
<GoabBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
</td>
</tr>
<tr>
<td>Pay service fee</td>
<td className="goa-table-number-column">
<GoabBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
</td>
</tr>
</tbody>
</GoabTable>Sizing
Provincial Family Resource Networks deliver high quality prevention and early intervention services.
Do
Use full width callouts with a maximum width of 700px.
This callout uses the medium size for mobile viewports.
Do
Use the medium callout on mobile to save space.
Content
Networks deliver high quality prevention and early intervention services. Find a network in your area.
Do
Use inline links when additional information exists on another page.
Employment standards set out the rights and obligations of employers and employees in Alberta. This includes the minimum standards that employers must provide. In this section, find out about Alberta’s basic employment standards, what to do if you think they are not being followed, and educational materials.
Don't
Don't include too much content. Callouts should communicate one important piece of information.
Submit your application by March 31, 2024 to be considered.
Do
Keep callouts focused on one key message
Other
Changes to employment standards rules are in effect.
Don't
Don't allow callouts to be dismissed.
The username you entered did not match our records.
Don't
Don't use callouts for form or field validation. Use error messages instead.