Sections
Borders
Stacks provides atomic classes for borders.
Classes
Section titled Classes| Class | Output | Definition | Responsive? |
|---|---|---|---|
.ba |
border: solid 1px #000 | Apply a border to all sides | |
.bt |
border-top: solid 1px #000 | Apply a border to the top side | |
.bb |
border-bottom: solid 1px #000 | Apply a border to the bottom side | |
.bl |
border-left: solid 1px #000 | Apply a border to the left side | |
.br |
border-right: solid 1px #000 | Apply a border to the right side | |
.by |
border-top: solid 1px #000; border-bottom: solid 1px #000; | Apply a border to the top and bottom sides | |
.bx |
border-left: solid 1px #000; border-right: solid 1px #000; | Apply a border to the left and right sides |
Examples
Section titled Examples<div class="ba">…</div>
<div class="bt">…</div>
<div class="br">…</div>
<div class="bb">…</div>
<div class="bl">…</div>
<div class="bx">…</div>
<div class="by">…</div>All borders
Top border
Right border
Bottom border
Left border
X border
Y border
Width
Section titled WidthWidth classes
Section titled Width classes| Class | Output | Definition | Responsive? |
|---|---|---|---|
.baw0 |
border-width: 0 | Applies a border width of zero to all sides | |
.btw0 |
border-top-width: 0 | Applies a border width of zero to the top side | |
.bbw0 |
border-bottom-width: 0 | Applies a border width of zero to the bottom side | |
.blw0 |
border-left-width: 0 | Applies a border width of zero to the left side | |
.brw0 |
border-right-width: 0 | Applies a border width of zero to the right side | |
.byw0 |
border-top-width: 0; border-bottom-width: 0; | Applies a border width of zero to the top and bottom sides | |
.bxw0 |
border-left-width: 0; border-right-width: 0; | Applies a border width of zero to the left and right sides | |
.baw1 |
border-width: 1px | Applies a border width of 1px to all sides | |
.btw1 |
border-top-width: 1px | Applies a border width of 1px to the top side | |
.bbw1 |
border-bottom-width: 1px | Applies a border width of 1px to the bottom side | |
.blw1 |
border-left-width: 1px | Applies a border width of 1px to the left side | |
.brw1 |
border-right-width: 1px | Applies a border width of 1px to the right side | |
.byw1 |
border-top-width: 1px; border-bottom-width: 1px; | Applies a border width of 1px to the top and bottom sides | |
.bxw1 |
border-left-width: 1px; border-right-width: 1px; | Applies a border width of 1px to the left and right sides | |
.baw2 |
border-width: 2px | Applies a border width of 2px to all sides | |
.btw2 |
border-top-width: 2px | Applies a border width of 2px to the top side | |
.bbw2 |
border-bottom-width: 2px | Applies a border width of 2px to the bottom side | |
.blw2 |
border-left-width: 2px | Applies a border width of 2px to the left side | |
.brw2 |
border-right-width: 2px | Applies a border width of 2px to the right side | |
.byw2 |
border-top-width: 2px; border-bottom-width: 2px; | Applies a border width of 2px to the top and bottom sides | |
.bxw2 |
border-left-width: 2px; border-right-width: 2px; | Applies a border width of 2px to the left and right sides | |
.baw3 |
border-width: 4px | Applies a border width of 4px to all sides | |
.btw3 |
border-top-width: 4px | Applies a border width of 4px to the top side | |
.bbw3 |
border-bottom-width: 4px | Applies a border width of 4px to the bottom side | |
.blw3 |
border-left-width: 4px | Applies a border width of 4px to the left side | |
.brw3 |
border-right-width: 4px | Applies a border width of 4px to the right side | |
.byw3 |
border-top-width: 4px; border-bottom-width: 4px; | Applies a border width of 4px to the top and bottom sides | |
.bxw3 |
border-left-width: 4px; border-right-width: 4px; | Applies a border width of 4px to the left and right sides |
Width examples
Section titled Width examples<div class="ba">…</div>
<div class="ba brw0">…</div>
<div class="ba bbw0">…</div>
<div class="ba baw2">…</div>
<div class="ba baw3">…</div>1px Border
0px Right border
0px Bottom border
2px border
4px border
Style
Section titled StyleStyle classes
Section titled Style classes| Class | Output | Definition |
|---|---|---|
.bas-solid |
border-style: solid | Applies a solid border style to all sides |
.bts-solid |
border-top-style: solid | Applies a solid border style to the top side |
.brs-solid |
border-right-style: solid | Applies a solid border style to the right side |
.bbs-solid |
border-bottom-style: solid | Applies a solid border style to the bottom side |
.bls-solid |
border-left-style: solid | Applies a solid border style to the left side |
.bas-dashed |
border-style: dashed | Applies a dashed border style to all sides |
.bts-dashed |
border-top-style: dashed | Applies a dashed border style to the top side |
.brs-dashed |
border-right-style: dashed | Applies a dashed border style to the right side |
.bbs-dashed |
border-bottom-style: dashed | Applies a dashed border style to the bottom side |
.bls-dashed |
border-left-style: dashed | Applies a dashed border style to the left side |
Style examples
Section titled Style examples<div class="ba bas-solid">…</div>
<div class="ba bas-dashed">…</div>
<div class="ba brs-dashed">…</div>Solid border style
Dashed border style
Dashed border right style
Color
Section titled ColorColor classes
Section titled Color classes| Class | Definition | Dark mode? |
|---|---|---|
.bc-transparent |
Transparent border color | |
.bc-white |
White border color | |
.bc-white-[x] |
Alpha stops for border color | |
.bc-black-[x] |
Black color stops for border colors | |
.bc-orange-[x] |
Orange color stops for border colors | |
.bc-blue-[x] |
Blue color stops for border colors | |
.bc-green-[x] |
Green color stops for border colors | |
.bc-powder-[x] |
Powder color stops for border colors | |
.bc-red-[x] |
Red color stops for border colors | |
.bc-yellow-[x] |
Yellow color stops for border colors | |
.bc-danger |
Danger border color alias | |
.bc-error |
Error border color alias | |
.bc-success |
Success border color alias | |
.bc-warning |
Warning border color alias |
Transparent
Section titled Transparent<div class="ba bc-transparent">Transparent</div>Transparent border color
Black
Section titled Black<div class="ba bc-black-900"></div>
<div class="ba bc-black-800"></div>
<div class="ba bc-black-750"></div>
<div class="ba bc-black-700"></div>
<div class="ba bc-black-600"></div>
<div class="ba bc-black-500"></div>
<div class="ba bc-black-400"></div>
<div class="ba bc-black-350"></div>
<div class="ba bc-black-300"></div>
<div class="ba bc-black-200"></div>
<div class="ba bc-black-150"></div>
<div class="ba bc-black-100"></div>
<div class="ba bc-black-075"></div>
<div class="ba bc-black-050"></div>
<div class="ba bc-black-025"></div>Black 900
Black 800
Black 750
Black 700
Black 600
Black 500
Black 400
Black 350
Black 300
Black 200
Black 150
Black 100
Black 75
Black 50
Black 25
White
Section titled White<div class="ba bc-white-3">White Border: Third Step</div>
<div class="ba bc-white-2">White Border: Second Step</div>
<div class="ba bc-white-1">White Border: First Step</div>White Border: Third Step
White Border: Second Step
White Border: First Step
Orange
Section titled Orange<div class="ba bc-orange-900"></div>
<div class="ba bc-orange-800"></div>
<div class="ba bc-orange-700"></div>
<div class="ba bc-orange-600"></div>
<div class="ba bc-orange-500"></div>
<div class="ba bc-orange-400"></div>
<div class="ba bc-orange-300"></div>
<div class="ba bc-orange-200"></div>
<div class="ba bc-orange-100"></div>
<div class="ba bc-orange-050"></div>Orange 900
Orange 800
Orange 700
Orange 600
Orange 500
Orange 400
Orange 300
Orange 200
Orange 100
Orange 50
<div class="ba bc-blue-900"></div>
<div class="ba bc-blue-800"></div>
<div class="ba bc-blue-700"></div>
<div class="ba bc-blue-600"></div>
<div class="ba bc-blue-500"></div>
<div class="ba bc-blue-400"></div>
<div class="ba bc-blue-300"></div>
<div class="ba bc-blue-200"></div>
<div class="ba bc-blue-100"></div>
<div class="ba bc-blue-050"></div>Blue 900
Blue 800
Blue 700
Blue 600
Blue 500
Blue 400
Blue 300
Blue 200
Blue 100
Blue 50
Powder
Section titled Powder<div class="ba bc-powder-900"></div>
<div class="ba bc-powder-800"></div>
<div class="ba bc-powder-700"></div>
<div class="ba bc-powder-600"></div>
<div class="ba bc-powder-500"></div>
<div class="ba bc-powder-400"></div>
<div class="ba bc-powder-300"></div>
<div class="ba bc-powder-200"></div>
<div class="ba bc-powder-100"></div>
<div class="ba bc-powder-050"></div>Powder 900
Powder 800
Powder 700
Powder 600
Powder 500
Powder 400
Powder 300
Powder 200
Powder 100
Powder 50
Green
Section titled GreenGreen borders can also be declared using our .bc-success alias class.
<div class="ba bc-green-900"></div>
<div class="ba bc-green-800"></div>
<div class="ba bc-green-700"></div>
<div class="ba bc-green-600"></div>
<div class="ba bc-green-500"></div>
<div class="ba bc-green-400"></div>
<div class="ba bc-green-300"></div>
<div class="ba bc-green-200"></div>
<div class="ba bc-green-100"></div>
<div class="ba bc-green-050"></div>
<div class="ba bc-green-025"></div>Green 900
Green 800
Green 700
Green 600
Green 500
Green 400
Green 300
Green 200
Green 100
Green 50
Green 25
Red borders can also be declared using our .bc-error and .bc-danger alias classes.
<div class="ba bc-red-900"></div>
<div class="ba bc-red-800"></div>
<div class="ba bc-red-700"></div>
<div class="ba bc-red-600"></div>
<div class="ba bc-red-500"></div>
<div class="ba bc-red-400"></div>
<div class="ba bc-red-300"></div>
<div class="ba bc-red-200"></div>
<div class="ba bc-red-100"></div>
<div class="ba bc-red-050"></div>Red 900
Red 800
Red 700
Red 600
Red 500
Red 400
Red 300
Red 200
Red 100
Red 50
Yellow
Section titled YellowYellow borders can also be declared using our .bc-warning alias class.
<div class="ba bc-yellow-900"></div>
<div class="ba bc-yellow-800"></div>
<div class="ba bc-yellow-700"></div>
<div class="ba bc-yellow-600"></div>
<div class="ba bc-yellow-500"></div>
<div class="ba bc-yellow-400"></div>
<div class="ba bc-yellow-300"></div>
<div class="ba bc-yellow-200"></div>
<div class="ba bc-yellow-100"></div>
<div class="ba bc-yellow-050"></div>Yellow 900
Yellow 800
Yellow 700
Yellow 600
Yellow 500
Yellow 400
Yellow 300
Yellow 200
Yellow 100
Yellow 50
<div class="ba bc-gold-darker"></div>
<div class="ba bc-gold"></div>
<div class="ba bc-gold-lighter"></div>Gold darker
Gold
Gold lighter
Silver
Section titled Silver<div class="ba bc-silver-darker"></div>
<div class="ba bc-silver"></div>
<div class="ba bc-silver-lighter"></div>Silver darker
Silver
Silver lighter
Bronze
Section titled Bronze<div class="ba bc-bronze-darker"></div>
<div class="ba bc-bronze"></div>
<div class="ba bc-bronze-lighter"></div>Bronze darker
Bronze
Bronze lighter
