Skip to main contenteBay Playbook

Divider

v2.0.0

Dividers break up and group content on the page.

Considerations

Supportive

Dividers separate groups of content when white space isn’t clear enough.

Subtle

Dividers are just noticeable enough to be effective and not interruptive.

Seldom

Dividers are used sparingly to group content, not separate multiple list items.

Types

Inset

Inset dividers divide groups of related content. They can also be used to provide structure to tappable cells. They should match the inset level of content.

Order checkout screen with inset dividers organizing content into sections for payment details, shipping address, and shipping method.

Full-width

Use full-width dividers to separate distinct sections of content. They can also be used instead of drop shadows to imply elevation for fixed elements.

Full-width divider line separating two item cards from a sticky bottom button titled “go to checkout”

Behavior

Separating list content

Dividers are used to separate list groups and not individual list items. This is especially helpful when content in adjacent lists are similar.

Product listing page, featuring a 'Listing' section with three watches at different prices and a 'Trending videos' section, separated by light grey divider lines for clear section distinction.

Elevated elements

Elements that overlay on top of other content, like fixed navigation or fixed actions, use a full-width divider to provide a stronger sense of separation.

Full-width divider line separating a grid of four sneaker images on top from a sticky action button on the bottom of the page to continue that is floating above the image content.

Best practices

Frequency

Do use dividers to separate groups of similar content.

App interface with two main sections, 'Messages' and 'Listings.' Divider line correctly separates the two sections.

Don’t use dividers to separate individual items within a list.

App interface with two main sections, 'Messages' and 'Listings.' Divider lines incorrectly separate the conversation threads in the 'Messages' section rather than delineate only between ‘Messages’ and ‘Listings’

Elevated content

Do use full-width dividers for elevated UI elements.

Interactive price range filter interface with a histogram showing distribution of prices, with a 'See 120 results' button below that is sticky to the bottom of the screen with a correct divider line full width between content above.

Don’t use inset dividers for content that overlaps other content.

Interactive price range filter interface with a histogram showing distribution of prices, with a 'See 120 results' button below that is sticky to the bottom of the screen with an incorrect inset divider line between content above.

Specs

A detailed spec for an inset divider. The divider line is 1px thick. The spacing on the left and right of the divider matches the margin of the page. In this case, there is 16px on the left and right, resulting in the divider’s width plus the left and right margins totaling 100%.

Inset divider

A detailed spec for a full-width divider. The divider line is 1px thick. The divider spans the full width of it’s content and totals 100% with no space on the left or right.

Full-width divider

Change log

VersionDateNotes
2.0.0
Jun, 2024
  • Updated to Playbook 2.0