Content Divider

A thin line that separates groups of content, solid or dashed. It can hold a label, an orb, a button or a small group of buttons.

import { ContentDivider } from '@orvain/react';
 
<ContentDivider type="sectionDivider" />
<ContentDivider type="centerLabelDivider">OR</ContentDivider>
<ContentDivider type="leftLabelDivider" pattern="dashed">Details</ContentDivider>

Add a solid Orvain Content Divider, section type: a plain rule.

Orvain MCPIncluded with the library

When to use#

Between sections of a form, menu or feed, when spacing alone is not enough.
With text, such as "or" between two sign-in methods.
With a button, to load or expand more content in place.

Anatomy#

1Line

1px #f2f2f2, solid or dashed 2/2, 12px from whatever it holds.

2Label

Today in Satoshi Medium 14, or an uppercase overline (OR) in #8f8f8f.

3Orb

A 14px white circle with a #e1e1e1 stroke.

4Buttons

A 32px + or Add button, or a three-item Button Group.

States#

Section

A plain rule.

Center / Left label

The line breaks around a label, centred or leading.

Solid text

A 2% grey band holding an overline.

Orb

The line breaks around a small orb.

Buttons

The line breaks around one button or a group.

Dashed

Any type, with a 2/2 dash.

Source#

Preview – final code pending

The Content Divider is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks