Divider

A <Divider> is a visual separator between two groups of content, e.g. groups of menu items or sections of a page.

It has two specific variants given, bold and section. You can view some examples further down the page.

Import

import { Divider } from '@marigold/components';

Appearance

Props

Examples

Divider between Text

This shows the default behavior of the <Divider>.

Section Divider variant

The Example shows the variant="section" of the <Divider> component. It can be used when you want to seperate some sections like e.g. <Menu.Items>. It has a lighter color than the default.

Bold Divider variant

The other variant which you can use is the bold one. This is a stronger line than the other variant and should be used if you want a striking seperator.