Use the notice-role attribute to categorize the notice as info, warning, danger or success. This choice determines the visual styling of the notice and communicates the urgency or importance of the message to people.
Specify the notice title and heading level
Use the notice-title attribute to create a clear and informative heading for the notice. Ensure the title conveys the message’s purpose.
Set the notice-title-tag to define the correct heading level for the notice title. While the font size remains the same regardless of the tag, setting the correct heading level maintains proper hierarchy and accessibility for assistive technologies.
Examples
Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.
These attributes are needed for the component to function correctly.
notice-role
The notice-role attribute sets the style of notice to be displayed.
<gcds-notice notice-role="success" notice-title="Success notice title" notice-title-tag="h2"> This is a success message.</gcds-notice>
notice-title
The notice-title attribute defines the title of the notice.
<gcds-notice notice-role="success" notice-title="Success notice title" notice-title-tag="h2"> This is a success message.</gcds-notice>
notice-title-tag
The notice-title-tag attribute sets the HTML heading element for the title. This attribute does not modify the font size. It is used to assign the heading level in order to maintain heading hierarchy and accessibility for assistive technologies.
<gcds-notice notice-role="success" notice-title="Success notice title" notice-title-tag="h2"> This is a success message.</gcds-notice>
Slots
The default slot allows you to inject custom content into the component’s primary content area, and named slots, into specific areas.
default
The default slot is for placing the message of the notice.
<gcds-notice notice-role="success" notice-title="Success notice title" notice-title-tag="h2"> This is a success message.</gcds-notice>
Code builder Generate an instance of the component you need by selecting its code properties.
Explore by choosing different code values to generate the instance you want.
Get the code and pull it into your environment.
Add any copy you need to the component (like text for a label).
Note: The code builder uses English for all code elements, which follows standard practice. This is a success message. 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-05-20