Expansion

v2.0.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
  • CoreUI
  • React
Stylized artwork of an expansion.

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.

Anatomy

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

Properties

Title

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

Three expansions with different titles: ‘See more’, ‘View details’, and ‘Read more’.

Behavior

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.

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.

Overflow

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

An expansion with the title wrapping into two lines.

Screen sizes

Small

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

A ‘See more’ expansion below a ‘Description’ section on the eBay mobile app.

Large

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

A ‘See more’ expansion below a ‘Description’ section on an eBay larger page.

Best practices

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.

Specs

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.

Change log

VersionDateNotes
2.0.0
Sep, 2024
  • Updated to eBay Evo
  • Updated text style of button title
  • Updated sizing
  • Added state layer
  • Updated icon size from 12 to 16
  • Updated default title content
  • Updated element color from foreground.accent to foreground.primary
  • Removed position and size properties
1.3.0
Apr, 2022
  • Fixed direction of chevron in expanded variants
  • Fixed dark mode colors
  • Updated color styles to appropriate token styles