Section notice
v4.0
A section notice is a message scoped to a specific area of the page, used for conditions that affect only that section, like form validation errors, shipping issues, or payment setup.
- CSS
- Marko
- React
A bolded title is optional. Title copy is specific and scannable, which quickly summarizes the purpose of the notice.
Lead with the most important information—what went wrong, what happened, or what users need to do. Don’t add long explanations or include multiple actions. Keep headlines contextual to the information or action related to the component you’re referencing.
Required. The body provides the context or detail users need to understand the notice and act on it, if needed.
For actionable notices, tell the user what to do next. Don't repeat nearby content.
Alert notices can include a dismiss button that removes the notice from the page layout. This is helpful for general or supplemental information provided by the notice.
Actionable notices include a link button below or beside the body text. Include actions if the user needs to complete a step to resolve the notice.
Link buttons provide a clear next step for users to resolve or engage with the notice. Make the verbs in the title and button correspond, and tell users what will happen when they interact.
See Link button for more guidance.
All alert notices are semantic. The available options are information, attention, confirmation, warning, and neutral. Get writing tips, and view more details for each type on the alert notice overview page.
Section notices appear on load as part of the page layout and are inset. Content shifts to fill the space when a section notice is dismissed. Section notices should only be related to a specific page section. They should always be dismissible or resolvable, not a permanent part of a design.
All text content will wrap if wider than the container. Avoid wrapping for button titles and titles where possible.
The action can be stacked below the content or inline with the content. By default, small screens have the action below, while large screens have the action pinned to the right.
The action should remain below the body content if it spans more than 2 lines on small screens.
Section notices are inset and can be directly beneath the global header or placed next to other related elements. The action can be below or beside the body content depending on the content length.
Section notices are inset and can be directly beneath the global header or placed next to other related elements. Their content adheres to the max width of the grid.
Do keep body copy in regular weight to maintain enough visual separation from the action.
Don’t use bold weight for the body copy. The action becomes more difficult to discern from the main content.
Do show one section notice at a time and replace it with next priority section notice after the user dismisses or addresses it.
Avoid stacking section notices. Stacked section notices can quickly become overwhelming.
