[component]

Dev Mode

SectionDivider

Description

A horizontal divider used to separate content sections. Provides visual separation between different groups of content within a container.

Section 1

Section 2

Usage Guidelines

Use to separate distinct sections of content within a single container.

Place dividers between related but distinct groups of information.

Use in lists to separate different categories of items.

Apply consistent spacing around dividers for visual balance.

Use in cards to separate different types of content or actions.

Don't

Don't use dividers between every single item in a list - this creates visual noise.

Avoid using dividers when content naturally flows together.

Don't use dividers as the primary method of organizing content - use proper headings and spacing first.

Avoid using dividers in very small containers where they may feel cramped.

Don't use dividers to separate content that should be grouped together.

Accessibility

Section dividers are decorative elements and should not be announced by screen readers.

Use dividers sparingly to avoid visual clutter and maintain clear content hierarchy.

Ensure sufficient contrast between the divider and background colors for users with visual impairments.

Status

Documentation:

Figma:

Web:

iOS:

Android:

Additional Documentation

Material Design Dividers

Card, Box, List components

Examples

Basic

Section 1

Section 2

InCard

Card Title

This is some content in a card.

This content is separated by a section divider.