Callout

Communicate important information through a strong visual emphasis.

Props

size

medium | large

Sets the size of the callout. 'medium' has reduced padding and type size for compact areas.

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.

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.

Examples

Confirm that an application was submitted

<GoabText tag="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 tag="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>

<goab-text tag="h1" mt="none">You have completed the application</goab-text>

<goab-callout type="success" heading="Your application was successful">
  <goab-text mt="none" mb="m"
    >You will receive a copy of the confirmation to the email
    person&#64;email.com</goab-text
  >
  <goab-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goab-text>
</goab-callout>

<goab-text tag="h2" mt="xl" mb="m"
  >Go back to the dashboard, or direct your user somewhere else useful.</goab-text
>
<goab-text
  >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&#64;gov.ab.ca</a>
</goab-text>

<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary">Go to application</goab-button>
  <goab-button type="secondary">Back to dashboard</goab-button>
</goab-button-group>

<goa-text as="h1" mt="none">You have completed the application</goa-text>

<goa-callout version="2" type="success" heading="Your application was successful">
  <goa-text mt="none" mb="m"
    >You will receive a copy of the confirmation to the email person@email.com</goa-text
  >
  <goa-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goa-text>
</goa-callout>

<goa-text as="h2" mt="xl" mb="m"
  >Go back to the dashboard, or direct your user somewhere else useful.</goa-text
>
<goa-text
  >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>
</goa-text>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary">Go to application</goa-button>
  <goa-button version="2" type="secondary">Back to dashboard</goa-button>
</goa-button-group>

Result page

      <GoabText tag="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 tag="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 tag="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>
  );
}

<goab-text tag="h1" mt="none">You have completed the application</goab-text>

<goab-callout type="success" heading="Application submitted">
  <goab-text size="body-m" mt="none" mb="s"
    >You will receive a copy of the confirmation to the email
    name&#64;email.com</goab-text
  >
  <goab-text size="body-m" mt="none" mb="none"
    >Your reference number is: <strong>1234ABC</strong></goab-text
  >
</goab-callout>

<goab-text tag="h2" mt="xl" mb="m">What happens next</goab-text>
<goab-text size="body-m" mt="none" mb="s"
  >We've sent your application to service name. They will contact you to confirm your
  registration.</goab-text
>
<goab-text size="body-m" mt="none" mb="s">You can now close this window.</goab-text>
<goab-text size="body-m" mt="none" mb="s"
  >What did you think of this service? <a href="#">Give feedback</a></goab-text
>

<goab-text tag="h2" mt="xl" mb="m"
  >If you have questions about your application</goab-text
>
<goab-text size="body-m" mt="none" mb="s">Contact the [ministry area].</goab-text>
<goab-text size="body-m" mt="none" mb="s"
  >Email:
  <a href="mailto:information&#64;gov.ab.ca">information&#64;gov.ab.ca</a></goab-text
>
<goab-text size="body-m" mt="none" mb="s"
  >Phone: <a href="tel:7801234567">780 123 4567</a></goab-text
>

<goa-text as="h1" mt="none">You have completed the application</goa-text>

<goa-callout version="2" type="success" heading="Application submitted">
  <goa-text size="body-m" mt="none" mb="s"
    >You will receive a copy of the confirmation to the email name@email.com</goa-text
  >
  <goa-text size="body-m" mt="none" mb="none"
    >Your reference number is: <strong>1234ABC</strong></goa-text
  >
</goa-callout>

<goa-text as="h2" mt="xl" mb="m">What happens next</goa-text>
<goa-text size="body-m" mt="none" mb="s"
  >We've sent your application to service name. They will contact you to confirm your
  registration.</goa-text
>
<goa-text size="body-m" mt="none" mb="s">You can now close this window.</goa-text>
<goa-text size="body-m" mt="none" mb="s"
  >What did you think of this service? <a href="#">Give feedback</a></goa-text
>

<goa-text as="h2" mt="xl" mb="m">If you have questions about your application</goa-text>
<goa-text size="body-m" mt="none" mb="s">Contact the [ministry area].</goa-text>
<goa-text size="body-m" mt="none" mb="s"
  >Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a></goa-text
>
<goa-text size="body-m" mt="none" mb="s"
  >Phone: <a href="tel:7801234567">780 123 4567</a></goa-text
>

Task list page

<GoabText tag="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 tag="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 tag="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 tag="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="default"
          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="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          icon={false}
        />
      </td>
    </tr>
  </tbody>
</GoabTable>

<goab-text tag="h1" mt="none">Apply for a service</goab-text>
<goab-callout
  type="important"
  emphasis="low"
  size="medium"
  heading="Application incomplete"
  mb="2xl"
  mt="xl"
  maxWidth="360px"
>
  You have completed 1 of 3 sections.
</goab-callout>

<goab-text tag="h2">1. Before you start</goab-text>
<goab-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Read terms of use</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="success"
          content="Completed"
          ariaLabel="completed"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goab-text tag="h2">2. Prepare application</goab-text>
<goab-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Your contact details</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="information"
          content="Not started"
          ariaLabel="not started"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Your family</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="information"
          content="Not started"
          ariaLabel="not started"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Verify your identity</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="information"
          content="Not started"
          ariaLabel="not started"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goab-text tag="h2" mb="s">3. Schedule service</goab-text>
<goab-text size="body-s" color="secondary" mt="2xs"
  >You need to complete the previous section before you can start this task.</goab-text
>
<goab-table width="100%" mt="l" mb="3xl">
  <tbody>
    <tr>
      <td>Receive email confirmation</td>
      <td class="goa-table-number-column">
        <goab-badge
          type="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
    <tr>
      <td>Pay service fee</td>
      <td class="goa-table-number-column">
        <goab-badge
          type="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goa-text as="h1" mt="none">Apply for a service</goa-text>
<goa-callout
  version="2"
  type="important"
  emphasis="low"
  size="medium"
  heading="Application incomplete"
  mb="2xl"
  mt="xl"
  maxwidth="360px"
>
  You have completed 1 of 3 sections.
</goa-callout>

<goa-text as="h2">1. Before you start</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
  <table style="width: 100%">
    <tbody>
      <tr>
        <td><a href="#">Read terms of use</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="success"
            content="Completed"
            aria-label="completed"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
    </tbody>
  </table>
</goa-table>

<goa-text as="h2">2. Prepare application</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
  <table style="width: 100%">
    <tbody>
      <tr>
        <td><a href="#">Your contact details</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="information"
            content="Not started"
            aria-label="not started"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
      <tr>
        <td><a href="#">Your family</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="information"
            content="Not started"
            aria-label="not started"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
      <tr>
        <td><a href="#">Verify your identity</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="information"
            content="Not started"
            aria-label="not started"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
    </tbody>
  </table>
</goa-table>

<goa-text as="h2" mb="s">3. Schedule service</goa-text>
<goa-text size="body-s" color="secondary" mt="2xs"
  >You need to complete the previous section before you can start this task.</goa-text
>
<goa-table version="2" width="100%" mt="l" mb="3xl">
  <table style="width: 100%">
    <tbody>
      <tr>
        <td>Receive email confirmation</td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="default"
            content="Cannot start yet"
            aria-label="cannot start yet"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
      <tr>
        <td>Pay service fee</td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="default"
            content="Cannot start yet"
            aria-label="cannot start yet"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
    </tbody>
  </table>
</goa-table>

Sizing

Provincial Family Resource Networks deliver high quality prevention and early intervention services.

Use full width callouts with a maximum width of 700px.

This callout uses the medium size for mobile viewports.

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.

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.

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.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Screen Readers

Tip

Use ariaLive='polite' for status updates. Use 'assertive' for urgent messages that should interrupt the user immediately.

View old component docs

Props

Confirm that an application was submitted

Result page

Task list page

Sizing

Content

Other

Screen Readers

Related components