Skip to main contenteBay Playbook

Section header

v4.1.1

Section headers separate bodies of content to create hierarchy throughout the experience. They help drive focus and navigation.

Stylized artwork of a section header.

Considerations

Anchoring

Section headers establish hierarchy and delineation between groups of content.

Scannable

Headers allow users to quickly scan content and identify where they’d like to focus.

Succinct

Headers are short and summarize the content they group.

Anatomy

A section header with 3 elements numbered: 1. Title, 2. Subtitle, 3. Trailing accessory.
  1. Title
  2. Subtitle
  3. Trailing accessory

Properties

Title

Being a header component, the title element is required. It should succinctly describe the content it is grouping.

A ‘Featured events’ section header title.

Subtitle

A subtitle is optional. Use it to support the title in describing the content and its purpose.

A ‘Mid Century Modern’ section header title with a ‘Frequently searched by you’ subtitle.

Trailing action

A trailing action is optional. This can be a link to more results or an icon button.

A ‘Mid Century Modern’ section header title, a ‘Frequently searched by you’ subtitle, and a ‘See all’ text link.

Overflow

If there is more than one additional action, they will collapse into an overflow icon button.

A ‘Mid Century Modern’ section header title, a ‘Frequently searched by you’ subtitle, and an overflow icon button.

Behavior

Text wrapping

The title and subtitle will wrap to multiple lines when wider than the container. Aim for no more than 2 lines where possible.

The trailing accessory will align differently depending on the type of accessory. Links will align to the baseline of the title or subtitle, and icon buttons will vertically center.

Three examples of text wrapping in section headers: The first example displays the title wrapping to two lines, and the subtitle below spanning one line. The trailing accessory (‘See all’ text link) is aligned to the baseline of the subtitle. The second example displays the title wrapping to two lines, and the trailing accessory (‘See all’ text link) is aligned to the baseline of the title. The third example displays the title wrapping to two lines, and the subtitle below spanning one line. The overflow icon button is vertically centered to the title and subtitle.

Screen sizes

Small

The title and link text are smaller on small screens. The spacing below the title is also smaller.

Section headers are shown on an eBay mobile screen.

Medium and large

Font sizes and bottom padding increase on larger screens.

Section headers are shown on a larger eBay screen.

Best practices

Length

Keep section headers short. Aim for a single line and use subtitles to add more detail.

A section header title spanning one line and a subtitle spanning two lines, with a ‘See all’ link.

Don’t let titles get too wordy. Simplify the title as much as possible, and add a 1-2 line subtitle if necessary.

A section header title spanning three lines with a ‘See all’ link.

Link text

Do use the default text link content.

A section header title, subtitle, and a ‘See all’ link.

Don’t change the text link content.

A section header title, subtitle, and a ‘View all furniture’ link.

Specs

Section headers are shown with specs highlighted. Specs for section headers on compact small screens: The Title is sized to the ‘Title 2’ type style, the subtitle is sized to the ‘Body’ type style. The padding below the section header is 16px, and the padding between the titles and trailing accessories (text link and overflow icon button) is 16px. Specs for section headers on larger screens: The Title is sized to the ‘Title 1’ type style, the subtitle is sized to the ‘Subtitle 2’ type style. The padding below the section header is 24px, and the padding between the titles and trailing accessories (text link and overflow icon button) is 16px.

Change log

VersionDateNotes
4.1.1
Sep, 2024
  • Updated to eBay Evo
4.1.1
Oct, 2023
  • Fixed unintentional padding in base component
4.1.0
Aug, 2023
  • Added footer boolean property
4.0.0
Aug, 2022
  • Simplified structure by removing unnecessary base component
  • Added new variants for an overflow icon button and a save action inline with the title
3.0.1
Jun, 2022
  • Prepended parent component name to base component
3.0.0
Apr, 2022
  • Updated navigation indicator from an arrow to a link button
  • Updated title size
  • Updated subtitle size
  • Deprecated info button option
  • Deprecated leading success icon option
  • Deprecated overflow button option