Border
Notation
Border utility classes can be defined using the format -b{sides}[-{breakpoint}]--{size}
.
{sides}
t
- use to applyborder-top
b
- use to applyborder-bottom
l
- use to applyborder-left
r
- use to applyborder-right
x
- use to applyborder-left
andborder-right
y
- use to applyborder-top
andborder-bottom
- blank - leave blank to apply
border
to all 4 sides.
{breakpoint}
Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.
- blank - leave blank to apply
border
to all breakpoints. sm
- use to applyborder
to sm and larger breakpoints.md
- use to applyborder
to ms and larger breakpoints.lg
- use to applyborder
to lg and larger breakpoints.xl
- use to applyborder
to xl breakpoints.
{size}
0
- use to eliminate existingborder
and set to0
1
- use to setborder
to1px
2
- use to setborder
to2px
3
- use to setborder
to3px
4
- use to setborder
to4px
Examples
Border Sides
Apply borders to specific sides of an element by adding t
,
b
, l
, r
, x
or y
to the class name.
<div class="-bt--1"></div>
<div class="-br--1"></div>
<div class="-bb--1"></div>
<div class="-bl--1"></div>
<div class="-bx--1"></div>
<div class="-by--1"></div>
Breakpoints
Target specific breakpoints with responsive classes.
-bx-lg--4 -by-lg--0
-b-md--2 -b-lg--3
-b-xl--4
<div class="-bx--0 -by--4 -bx-lg--4 -by-lg--0"></div>
<div class="-b--0 -b-sm--1 -b-md--2 -b-lg--3 -b-xl--4"></div>
Border Sizes
Control an elements border size by adjusting the size from 0
- 4
.
<div class="-b--0"></div>
<div class="-b--1"></div>
<div class="-b--2"></div>
<div class="-b--3"></div>
<div class="-b--4"></div>
Border Colors
Use contextual color classes to change a borders color.
Brand
Brand border colors reinforce Lumen's brand. Use primary and secondary as accents and base, black, and white as neutrals.
<!-- For light backgrounds -->
<div class="-b--1 -b--base-light"></div>
<div class="-b--1 -b--base"></div>
<div class="-b--1 -b--base-dark"></div>
<div class="-b--1 -b--primary"></div>
<div class="-b--1 -b--black"></div>
<!-- For dark backgrounds -->
<div class="-b--1 -b--secondary"></div>
<div class="-b--1 -b--white"></div>
Semantic
Use semantic border colors to communicate meaning to users. Use green (success) for positive, blue (info) for informative, red (danger) for negative, and yellow (warning) for needs attention.
<div class="-b--1 -b--success"></div>
<div class="-b--1 -b--success-light"></div>
<div class="-b--1 -b--info"></div>
<div class="-b--1 -b--info-light"></div>
<div class="-b--1 -b--danger"></div>
<div class="-b--1 -b--danger-light"></div>
<div class="-b--1 -b--warning"></div>
<div class="-b--1 -b--warning-light"></div>
Transparent
Use the transparent border color as a method to hide an elements border without altering its size.
<div class="-b--1 -b--transparent"></div>
Responsive
Use breakpoint classes to change an elements border color on different viewports. Follow the format -b[-{breakpoint}]--{color}
.
<div class="-b--1 -b--primary -b-sm--dark -b-md--danger -b-lg--success -b-xl--warning"></div>