Documentation

Design System Navigation

Borders

Border classes to add horizontal borders to block-level elements.

Usage

When to Use

Default border

The default border is a 1px, solid gray border.

Class Name Description
u-border

Gives a default border to all sides.

u-border--top

Gives a default border to the top side.

u-border--bottom

Gives a default border to the bottom side.

u-border--left

Gives a default border to the left side. Only visable at viewports larger then medium.

u-border--right

Gives a default border to the right side. Only visable at viewports larger then medium.

u-border--red

Gives a default red border to all sides.

u-border--light

Sets the border colors to $c-gray–light.

u-border--none

Disables the border.

u-border--left--white--at-large

Sets a white border at viewports above large.

u-border--left--black--at-large

Sets a black border at viewports above large.

o-divider

Creates a 1px horizontal border on the right side of an element for dividing side-by-side text blocks/spans.