Section notice

v4.0.0

Section notices are lower-priority messages that communicate status of a section of content.

Anatomy

A section confirmation alert notice. Number 1 points to the title. Number 2 points to the icon. Number 3 points to the button. Number 4 points to the body. Number 5 points to the close/dismiss.

Title
Icon
Button
Body
Close/dismiss

Properties

Title

A bolded title is optional. Use a title to quickly summarize the purpose of the notice. Keep titles short, no more than 60 characters, and avoid repeating the body text.

Body

The body text is required for all notices. Aim for 1-2 lines. If the body content exceeds 3 lines, consider whether a different design treatment might be better suited to accommodate the length of the message. For actionable notices, the text should inform the user of a next step.

Dismiss

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

Actionable notices include a link button below or beside the body text. It is recommended that notices include an action that helps resolve them.

A mobile screen with an information section notice. “Button” points to the link button “Update account details”.

Semantic

All alert notices are semantic. The available options are information, attention, confirmation, and general. Choose the semantic type depending on the type of message. The icons cannot be customized, and only three options are available: information, attention, and confirmation.

The four variants of section notices including information, attention, confirmation, and general.

Behavior

Placement

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 always be dismissible or resolvable, not a permanent part of a design.

An information section notice in the middle of content sections on a mobile screen. The section notice states a new sales report is ready with a button to view report.

Overflow

All text content will wrap if wider than the container. Avoid wrapping for button titles and titles where possible.

A mobile screen with an information section notice at in the middle of content sections. It has three lines of text and no button.

Layout

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.

Two information section notices. One is wide and one is narrow. The wide one has the button on the right, while the narrow one has the action button at the bottom.

Screen sizes

Small

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.

A mobile screen with an information section notice at the top of the screen. It has two lines of text and a button.

Large

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.

Best practices

Content

Do keep body copy in regular weight to maintain enough visual separation from the action.

An information section notice with regular-weight body text.

Don’t use bold weight for the body copy. The action becomes more difficult to discern from the main content.

An information section notice with bold-weight body text.

Stacking

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.

Two variants of section notices stacked on top of each other.

Specs

Change log

Version	Date	Notes
4.0.0	Aug, 2024	Updated to eBay Evo
4.0.0	Oct, 2022	The page, section, and inline notices have been recombined into a single Figma component to align with coded components. Content overrides should not reset, but this may lead to inline notice components showing a close icon and action when changes are accepted. Select the instances and toggle the “Actionable?” and “Dismissible?” properties to hide those elements. Added a “Level” property to choose between a page, section, or inline notice. Consolidated values for the “Action location” property as “below” and “beside.” Renamed “Show action” and “Show close icon” properties as “Actionable?” and “Dismissible?” respectively. Updated default values for body and title text properties. Toggled the new “simplify all instances” to hide layers without properties and simplify the property panel.
3.0.1	Jul, 2022	Fixed width of close icon container Updated alignment from center to top when the action is on the right.
3.0.0	Jun, 2022	Updated icon from medium to small Converted to using component properties New properties Semantic type Action location Show title Show action Show close icon Title content Body content Action label Updated layer name Cleaned up hidden layers Streamlined layer structure
2.2.0	May, 2022	Converted Level property values into unique components [Level=Page] is now “Alert page notice” [Level=Section] is now “Section page notice” [Level=Inline] is now “Inline page notice”