Divider

---

Anatomy

1. Divider: A line that divides content

---

Usage Guidelines

Dividers are one way to visually group components and create hierarchy. They can also be used to imply nested parent/child relationships.

When to use this component

• Use a Divider in card to separate content.
• Use full width Dividers to separate larger sections of unrelated content. They can be used directly on a surface or inside other components like cards or lists.
• Use to group visual elements together, and indicate when elements are related to each other from an interaction perspective. 
• Only use Dividers if items can’t be grouped with open space
• Use Dividers to group things, not separate individual items

When not to use this component

• Do not use a Divider component as a substitute for proper spacing, to separate unrelated content, or when the content hierarchy can be established using other visual cues. A divider's purpose is to indicate a relationship between elements, not to simply break up a page.
• Don't use a Divider if a page's content is already well-organized with clear headings, subheadings, and distinct sections, a divider may be redundant.
  

---

Best Practices

---

General Component Behaviors

• In general Dividers should go full with of the container that they are in.
• In rare cases there can be a small padding between the left and right edges of the container.

---

Styles

Primary

Use a primary Divider to help shape the layout of the page or separate elements on darker backgrounds i.e. inset background.

Secondary

Use secondary Divider to suggest a separation among elements i.e., lists of items or logical sections inside forms.

---

Known Gaps

• Potential component enhancement:
• Full width vs indent variant types