Borders

CSS file

Use the border utility classes to control the border size and color properties.

The border utility class sets the border-color and border-size, with support for the following sizes: 0, 1px, or 2px.

sba- u- border-[x|y|bottom|left|right|top]--[SIZE]
Namespace
Prefix
BEM syntax
sba-u-border--0
sba-u-border--1
sba-u-border--2
sba-u-border-x--0
sba-u-border-x--1
sba-u-border-x--2
sba-u-border-y--0
sba-u-border-y--1
sba-u-border-y--2
sba-u-border-bottom--0
sba-u-border-bottom--1
sba-u-border-bottom--2
sba-u-border-left--0
sba-u-border-left--1
sba-u-border-left--2
sba-u-border-right--0
sba-u-border-right--1
sba-u-border-right--2
sba-u-border-top--0
sba-u-border-top--1
sba-u-border-top--2

Border color

sba- u- border--[COLOR NAME]
Namespace
Prefix
BEM syntax
sba-u-border--inverse
sba-u-border--error
sba-u-border--error-light
sba-u-border--error-lighter
sba-u-border--warn
sba-u-border--warn-light
sba-u-border--warn-lighter
sba-u-border--success
sba-u-border--success-light
sba-u-border--success-lighter