BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Divided list

Displays a list of related items separated by dividers, for easy scannability.

Appearance

Anatomy

A divided list is a layout approach where related items are stacked vertically and separated by Dividers. Similar to Cards, divided lists are highly flexible and can contain many types of content including copy, images, calls to action and layout components. The examples below use Columns to organise content in a structured way.A simple 2-column divided list:

Heading

Strong text lorem ipsumSecondary text dolor sit amet
Strong textSecondary text consectetur adipiscing
Strong text ipsumSecondary text vel odio
 
Open in Playroom
A more detailed, multi-column divided list. This prototype uses responsive techniques to hide and reveal content across viewports. Open it in Playroom to see it in action.

Heading example

8 lorem ipsum
 
Open in Playroom

Visual guidelines

  • It’s generally recommended to include a heading above the divided list.
  • When it makes sense, consider including an item count below the heading (for example, 26 job ads).
  • Display leading and trailing dividers. If the divided list is displayed directly below a heading, you may choose to omit the leading divider.
  • Avoid displaying a column header row, as this will need to be hidden on mobile. Instead, label content in place so that it can be understood without a header.

Best practices

General best practice

  • Group related content in a logical way.
  • Include relevant actions. A divided list is about helping users take action on the appropriate list item.
  • On smaller devices, divided lists should collapse into a stack so the user can continue to view each item as a whole.

When to use

Use a divided list when:
  • displaying a group of related items consecutively in an organised way
  • users need to locate an individual item and take action on it
  • it’s important for the user to view each list item as a whole.
Don’t use a divided list when:
  • displaying a numerical dataset using rows and columns (use a Table instead)
  • providing a summary and entry point to more detailed information (use a Card instead).

Related

  • Card — For providing a summary and entry point to more detailed information.
  • Divider — For separating consecutive list items.
  • Table — For displaying datasets in a structured way using rows and columns.
  • Bulk actions — For applying a single action across multiple selected items.
On this page