Content dividers

A break between two runs of content: one ContentDivider in three types around whatever child you give it. The sheet’s six content forms are compositions.

Demo

hero
OR
type
Content
import { ContentDivider } from "@/components/application/content-divider/content-divider"; <ContentDivider> <span className="text-tertiary text-sm font-medium">OR</span> </ContentDivider>

In context

in-context
View in a page

Types

cells

Three types across the sheet's two label styles.

Today
single-line, Heading label
OR
single-line, Text label
Today
dual-line, Heading label
OR
dual-line, Text label
Today
background-fill, Heading label
OR
background-fill, Text label

Compositions

cells

The sheet's four button forms, composed from base components.

single-line

Button
Button icon
Button group
Button group icon

dual-line

Button
Button icon
Button group
Button group icon

background-fill

Button
Button icon
Button group
Button group icon

Content

cells

Label styles

Today
Heading style
OR
Text style
OR
a bare string, inheriting the page

Long labels

Messages you received earlier today are shown below
a sentence in a narrow column, wrapping
Messages you received earlier today are shown below
the same sentence at the column's width

Behaviour

cells

The row takes the child's height; the rules take what is left.

Height

OR
Text label
Button, size sm
Button, size lg

Width

Button group in a narrow column
Button group at the column's width