No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Border

Applying a border

Utilities for controlling an element's borders.

These utilities apply a border of 1px size, and a --border-norm color as default.
ClassExplanationQuick look
borderApplies a border all around an element.lorem
border-topApplies a border on top of an element.lorem
border-rightApplies a border on right of an element.lorem
border-bottomApplies a border on bottom of an element.lorem
border-leftApplies a border on left of an element.lorem
border-noneCancel borders all arround an element.lorem

Border color

Utilities for controlling the color of an element's borders.

These classes need to be used in addition with one of border, border-top, border-right, border-bottom or border-left classes.
ClassExplanationQuick look
border-primaryChanges border color to --primary.lorem
border-normChanges border color to --border-norm (default).lorem
border-weakChanges border color to --border-weak.lorem
border-dangerChanges border color to --signal-danger.lorem
border-warningChanges border color to --signal-warning.lorem
border-successChanges border color to --signal-success.lorem
border-infoChanges border color to --signal-info.lorem
border-currentColorChanges border color to the same color as surrounding text.lorem

Border style

Utilities for controlling the style of an element's borders.

These classes need to be used in addition with one of border, border-top, border-right, border-bottom or border-left classes.
ClassExplanationQuick look
border-dashedChanges border style to dashed.lorem
border-dottedChanges border style to dotted.lorem

Example

Apply a border all arround, then override the color to weak, then override the style to dashed.

<div className="border border-weak border-dashed">Lorem ipsum dolor sit amet</div>