Elements:Dividers
AppStrap offers responsive block divider options to divide up your content blocks, here are the styles and options available.
Vertical Rules
Add the class
vr
within
hstack
flexbox wrapperrs.
Diagonal Dividers
Add the class
divider-diagonal
plus an arrow direction class
divider-diagonal-(r)
. r = right, l = left
.divider-diagonal
.divider-diagonal-r
Arrow Dividers
Add the class
divider-arrow
plus an arrow direction class
divider-arrow-(r|l|t|b)
. r = right, l = left, b = bottom & t = top.
.divider-arrow-l
.divider-arrow-r
.divider-arrow-t
.divider-arrow-b
Colour Options
The AppStrap colours can be used on all divider types, colour options are:
.divider-light
.divider-primary
.divider-info
.divider-success
.divider-warning
.divider-danger
.divider-dark
.divider-green
.divider-red
.divider-blue
.divider-purple
.divider-pink
.divider-orange
.divider-brown
.divider-slate
.divider-olive
.divider-teal
.divider-charcoal
Opacity
Use the classes
.divider-op-(1-9)
to control the opacity of dividers.
Responsive Dividers
Dividers are also responsive so you can control at which breakpoint they kick in. Classes pattern is:
.divider-(sm|md|lg|xl)
Examples
Left arrow
Newsletter
Get offers & discounts with our monthly newsletter: "No pain, no gain"