Dividers

A divider aids in grouping content.

When to use

In components

Not to worry! These are built-in to components like Lists, Selects and Menus.

 

In boxes

Dividers span the width of the box, aligning with internal padding.

Web

Padding: 24px top/bottom

Dividers-example-box-web

 

Native app

Padding: 16px top/bottom

Dividers-example-box-nativeapp

 

As table dividers

Dividers-example-table

 

When not to use

Under page titles and section titles. Instead, use ample padding.

 

Text: dashes and separators

Stick to hyphen, em dash and dots when keeping 2 elements separate but joined. Avoid en dashes and vertical lines.

  • 1 hyphen: Use a single hyphen ( “-” ) to join times and dates.
    • Add spaces before and after for long form, and no spaces for short form—view Date, time, duration guidelines.
    • Example (long form): 9:00 am - 5:00 pm --> spaces
    • Example (short form): 9am-5:30pm --> no spaces
  • 2 hyphens: Use 2 hyphens to show that a cell is empty (no data) on a table.
    • View empty states guidelines.
    • Don’t add spaces before, after or in between.
  • Em dash: Use em dashes ( “—”) to separate clauses within a sentence.
    • Don’t add spaces before or after.
    • Example: We want to keep you informed—not overwhelmed.
  • Dot: Use a single dot ( “•” ) to separate items while still showing they’re closely related, such as phone and email in a team member’s profile.
    • Add a space before and after the dot
    • Dot available as Option + 8
  • Slanted line: Use a slanted line ( “/”) to separate money values.
    • Don’t add a space before or after
    • Example: $24/hr
Dividers-Example-hyphens
Dividers-Example-Dot