Skip Navigation

Dividers

Dividers form a visual separation of elements or components on a page.

Horizontal Dividers

Top and bottom margins

No bottom margin

No top margin

Title divider

<div>Top and bottom margins</div>
<hr className="uscb-hr-flex uscb-bg-primary" />

<div>No bottom margin</div>
<hr className="uscb-hr-flex-bottom uscb-bg-secondary-1" />

<div>No top margin</div>
<hr className="uscb-hr-flex-top uscb-bg-secondary-3" />

<div>Title divider</div>
<hr className="uscb-hr-title uscb-bg-accent" />

Top of Section

Vertical Dividers

Item One

Item Two

Item Three

Item Four

Item Five

Item Six Line 1

Item Six Line 2

Item Six Line 3

<div className="uscb-layout-row">
<div><p>Item One</p></div>
<hr className="uscb-vertical-hr uscb-border-primary" />
<div><p>Item Two</p></div>
<hr className="uscb-vertical-hr uscb-border-secondary-1" />
<div><p>Item Three</p></div>
<hr className="uscb-vertical-hr uscb-border-secondary-2" />
<div><p>Item Four</p></div>
<hr className="uscb-vertical-hr uscb-border-secondary-3" />
<div><p>Item Five</p></div>
<hr className="uscb-vertical-hr uscb-border-accent" />
<div>
<p>Item Six Line 1</p>
<p>Item Six Line 2</p>
<p>Item Six Line 3</p>
</div>
</div>