Improve your productivity with helper classes and utilities
We have easy to use classes to help you align your content.
You can easily vertically center things by adding the class
valign-wrapper to the container holding the items you want to vertically align.
This should be vertically aligned
<div class="valign-wrapper"> <h5 class="valign">This should be vertically aligned</h5> </div>
These classes are for horizontally aligning content. We have
This should be left aligned
This should be right aligned
This should be center aligned
<div> <h6 class="left-align">This should be left aligned</h6> </div> <div> <h6 class="right-align">This should be right aligned</h6> </div> <div> <h6 class="center-align">This should be center aligned</h6> </div>
Quickly float things by adding the class
right to the element.
!important is used to avoid specificity issues.
<div class="left">...</div> <div class="right">...</div>
We provide easy to use classes to hide content on specific screen sizes.
||Hidden for all Devices|
||Hidden for Mobile Only|
||Hidden for Tablet Only|
||Hidden for Tablet and Below|
||Hidden for Tablet and Above|
||Hidden for Desktop Only|
These classes help format various content on your site.
To truncate long lines of text in an ellipsis, add the class
truncate to the tag which contains the text. See an example below of a header being truncated inside a card.
This is an extremely long title that will be truncated, so, it has to be a really long long title
<h6 class="truncate">This is an extremely long title that will be truncated</h6>
hoverable is a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
<div class="card-panel hoverable">Hoverable Card Panel</div>