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
    • Card
    • Carousel
    • CCD
      • Filter chip
      • Input chip
      • Graphs
      • Metrics
    • Date picker
    • Dialog
    • Divider
    • Education notice
    • EEK rating and range
    • Expansion
      • Checkbox
      • Combobox
      • Dropdown
      • Numeric stepper
      • Password
      • Phone number
      • Radio button
      • Select list
      • Switch
      • Text area
      • Text field
    • Item tile
    • List row
      • Overview
      • Expressive loader
      • Skeleton loader
    • Media container
      • Top navigation bar
    • Pagination
    • Popover
    • Progress stepper
    • Search field
    • 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

Expansion

v2.0

Expansion is a lightweight container that can function independently or be integrated into a larger surface. Tapping the expansion controls will either expand the content into a larger section or collapse it back to its original size.

  • Skin
  • Marko
  • React
Stylized artwork of an expansion.
Expansionv2.0

On this page

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

Anatomy

Properties

Behavior

Screen sizes

Best practices

Specs

PreviousEEK rating and range
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.

    Title

    The title describes what occurs when the button is selected. The title can be adjusted according to the context.

    Expanding

    The expansion button title adjusts according to its state to indicate what occurs when pressed. The title says “more” when collapsed and “less” when expanded. The expand button remains below the revealed content.

    Overflow

    The title wraps to another line when extending beyond the parent container.

    Small

    Expansion buttons appear directly beneath the content they expand on small screens.

    Large

    Expansion buttons appear directly below the content they expand on large screens.

    Three expansions with different titles: ‘See more’, ‘View details’, and ‘Read more’.
    Two quick filter groups titled ‘Explore related searches’. The group above has three lines of quick filters, with a ‘See more’ expansion below. The group below has six lines of quick filters, with a ‘See less’ expansion below.
    An expansion with the title wrapping into two lines.
    A ‘See more’ expansion below a ‘Description’ section on the eBay mobile app.
    A ‘See more’ expansion below a ‘Description’ section on an eBay larger page.
    Two expansions are shown with specs highlighted. The height of an expansion is 44px, the padding on the top and bottom of an expansion is 12px, the padding between the title and trailing icon is 6px, and the width of the trailing icon is 16px.

    Considerations

    Progressive

    Expansions reduce visual complexity and information density.

    Empower

    Users decide what information they want to see and when.

    On-demand

    Revealing and hiding information is a single tap away.

    Expansion diagram with 2 elements numbered: 1. Title, 2. Trailing icon.
    1. Title
    2. Trailing icon

    Button title

    Keep the title short and concise. Only add additional qualifiers if it’s necessary to clarify the expected behavior.

    A ‘See more’ expansion under an ‘Item details’ section.

    Don’t use long or wordy titles. Extra long titles can negatively affect the overall hierarchy.

    A ‘Tap to view more details’ expansion under an ‘Item details’ section.

    Amount of content

    Use expansion buttons to expand a reasonable amount of content within view.

    A ‘See less’ expansion under an ‘Explore related searches’ section with quick filters. The quick filters span four lines.

    Be careful expanding a large amount of content. If it expands off screen, the connection to the content can get lost and become difficult to navigate.

    A ‘See less’ expansion under a group of quick filters. The quick filters span six lines and continue off screen.

    Density

    Use a tertiary button when paging content that cannot be collapsed.

    A ‘See more’ tertiary button below item tiles.

    Don’t use expansion buttons for paging content.

    A ‘See more’ expansion below item tiles.