Effects
The effects section can be broadly considered as being concerned with visual enhancements that would not ordinarily interfere with information or general layout. This can be as simple as borders, or as complex as animations.
Borders
Border Sides
Set the sides to which borders are applied.
.border-all
.border-top
.border-right
.border-bottom
.border-left
Border Colors
These example all have the .border class applied. Expand on this by adding color classes. The first three use the invertible subtle-medium, strong variants. The last two use the simple .border-blue and .border-red classes.
.i-border-subtle
.i-border-medium
.i-border-strong
.border-blue
.border-red
Border Widths
These examples all have the .border class applied. Expand on this by adding border width classes.
.border-xs
.border-sm
.border-md
.border-lg