Skip to main contenteBay Playbook
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles

Design system

  • Overview
    • Overview
    • Color
    • Dimension
    • Spacing
    • Typography
    • Breakpoints
    • Shadow
    • Shape
    • Opacity
    • Motion
    • Overview
    • Status
    • Accordion
    • Action bar
      • Overview
      • Inline notice
      • Page notice
      • Section notice
    • Avatar
    • Badge
    • Banner
    • Breadcrumb
      • Overview
      • Branded button
      • CTA button
      • Icon button
      • Link button
    • Carousel
    • CCD
      • Graphs
      • Metrics
    • Date picker
    • Dialog
    • Divider
    • Education notice
    • EEK rating and range
    • Expansion
      • Checkbox
      • Chip
      • Combobox
      • Dropdown
      • Numeric stepper
      • Password
      • Phone number
      • Radio button
      • Search field
      • Select list
      • Switch
      • Text area
      • Text field
    • Item tile
    • List row
      • Overview
      • Expressive loader
      • Skeleton loader
    • Media container
    • Pagination
    • Popover
    • Progress stepper
    • Quick filter
    • Section header
    • Segmented button
      • Bottom sheet
      • Panel
    • Signal
    • Snackbar
    • Tab
    • Table
      • Tooltip
      • Tourtip
    • Toggle button group
    • Video player
    • Overview
    • Bulk editing
    • File uploading
      • Text link

Section notice

v4.0

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

Stylized graphic of a section notice.
Section noticev4.0

On this page

  • Anatomy
  • Properties
  • Behavior
  • Screen sizes
  • Best practices
  • Specs

Anatomy

Properties

Behavior

Screen sizes

Best practices

Specs

Specs for a wide and narrow section notice. Both use 16px icons with 12px of space between the icon and content area. 16px is between the body text and link button. 12px of minimum space is between the content area and close/dismiss button. The close button is 16px. 16px of padding is around the top, bottom, left, and right of the content area. The corner radius on the container is 8px.
PreviousPage notice
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • Careers
  • Press
  • Privacy policy
© 2025 eBay. All rights reserved.

eBay Evo, the eBay trademark, and the eBay logo are the intellectual property of eBay Inc.

    1. Title
    2. Icon
    3. Button
    4. Body
    5. Close/dismiss

    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.

    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.

    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.

    Overflow

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

    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.

    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.

    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.

    Content

    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.

    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.

    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.
    A mobile screen with an information section notice. “Title” points to “Reactivate your account”.
    A mobile screen with an information section notice. “Body” points to “Fill out a few more details to unlock your ability to list items.”
    A mobile screen with an information section notice. “Close/dismiss” points to an “x” close icon.
    A mobile screen with an information section notice. “Button” points to the link button “Update account details”.
    The four variants of section notices including information, attention, confirmation, and general.
    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.
    A mobile screen with an information section notice at in the middle of content sections. It has three lines of text and no button.
    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.
    A mobile screen with an information section notice at the top of the screen. It has two lines of text and a button.
    A large desktop screen with an information section notice beneath the page title “Order details”. It states an order is processing and when the appointment time is.
    An information section notice with regular-weight body text.
    An information section notice with bold-weight body text.
    A single section notice.
    Two variants of section notices stacked on top of each other.
    • Skin
    • Marko
    • React