Inline notice

v4.0.0

Inline notices are low-priority messages about a single element, like a tile or row item.

Anatomy

An inline confirmation alert notice. Number 1 points to the title. Number 2 points to the icon. Number 3 points to the action. 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 the body text. It is recommended that notices include an action that helps resolve them.

A mobile screen with an information inline 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 inline notices including information, attention, confirmation, and general.

Behavior

Placement

Inline notices appear on load as part of the page layout and are inset. Content shifts to fill the space when an inline notice is dismissed. Inline notices should always be dismissible or resolvable, not a permanent part of a design.

An information inline notice in the middle of page content. The inline notice states a sales report is ready to export with a button to view the report.

Overflow

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

An information inline notice with two lines of body copy. It does not have a title, action button, or dismiss.

Layout

The button is always stacked below the content for inline notices. This applies to both small and large screens.

Two information inline notices. One is wide and one is narrow. Both have the action button below the content.

Screen sizes

Small

On small screens, inline notices are positioned next to the related elements, with the button placed below the main content.

A mobile screen with an information inline notice between sections of content. It has two lines of text and a button.

Large

On large screens, inline notices are positioned beside their related elements. If a button is included, it is placed below the main content. Unlike page and section notices, which can include a right-aligned button, inline notices do not have this option.

Best practices

Inline proximity

Do keep inline notices close to and focused on their target element.

A visual graphic showing an inline notice below a group of content.

Don’t use inline notices for sections, page-level content, or attention account information. Use a section or page notice notice instead.

Content

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

An information inline notice with regular-weight body text.

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

An information inline notice with bold-weight body text.

Stacking

Do show one inline notice at a time and replace it with the next priority inline notice after the user dismisses or addresses it.

Avoid stacking inline notices. Stacked inline notices can quickly become overwhelming.

Three variants of inline 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 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”