Style
text
headers with semantic tags
h1 Primary / h1 secondary
h2 Primary / h2 secondary
h3 Primary / h3 secondary
h4 Primary / h4 secondary
h5 Primary / h5 secondary
h6 Primary / h6 secondary
headers with class names (identical appearance)
.h1 Primary / .h1 secondary
.h2 Primary / .h2 secondary
.h3 Primary / .h3 secondary
.h4 Primary / .h4 secondary
.h5 Primary / .h5 secondary
.h6 Primary / .h6 secondary
Normal body text.
link
default link:
link
link with target="_blank":
link
link with class external:
link
link with class anchor:
link
gradient
gradient-purple-light
gradient-red-light
gradient-yellow-light
gradient-green-light
gradient-blue-light
gradient-navy-light
gradient-purple
gradient-red
gradient-yellow
gradient-green
gradient-blue
gradient-navy
gradient-purple-dark
gradient-red-dark
gradient-yellow-dark
gradient-green-dark
gradient-blue-dark
gradient-navy-dark
avatar
as divs
small
default
large
as buttons
small
default
large
button
menu
Menu should be an element with the class menu. It should
contain an unordered list.
Adding the class open to a menu opens it.
For a no-js option, you can add the class open-on-hover to
make a menu open on hover or focus-within. Though note that this means
users will have to tab through every item in the menu.
I'm some other content that's beneath them, I'll be overlapped by the open
menu.