GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Notice
<gcds-notice>

Also called: contextual alert. The notice is a short, prominent message that’s part of the page content.
  • GitHub
  • Figma

Notice component preview

Problems notice solves

Use notice to:
  • Communicate updates, warnings, and confirmations about the tasks on a page or about an activity or event that could affect people using the service.
  • Make key messages stand out within page content, through sparing use.
  • Provide context or additional information on the page content for better understanding.
Error message or error summary for errors in a form field, on a page, or in a flow. Banner for a message that applies to part of or the entire site or product.

Notice roles

Set the notice roles based on the message context and corresponding visual appearance.

Information

Use the information role to:
  • Provide supplementary information to enhance the reader’s understanding of the surrounding content.
  • To offer tips or additional context that’s helpful in completing the main tasks on the page.
  • Communicate non-critical information that’s important for the job or task a person would want to do.
Thank you for your interest in Canada Summer Jobs. Applications are now closed.

Success

Use the success notice role to:
  • Communicate the successful completion of a task.
  • Reinforce positive outcomes or confirmations within the content.
Processing your request may take up to four (4) weeks. We’ll contact you if we need more information.

Warning

Use the warning notice role to:
  • Caution people about issues or considerations when there’s no immediate need for action.
  • Inform people about changes, alterations to services, or other impactful but non-critical updates.
  • Draw attention to information about future changes or possible implications to health and safety, security, and laws.
New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.

Danger

Use the danger notice role to:
  • Highlight content that people must be aware of due to its severity and that could have major negative impacts if ignored.
  • Emphasize an issue or news that has serious implications to health and safety, security, and laws. Include a link to the most current information.
  • Flag when a person needs to take action right away and provide a means to do so, like a link.
Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2026-02-12