Below you will find a list of CSS helper classes. Be mindful that not all of this classes are able to be combined and improper use may have some unexpected results.
If you're not sure, reach out to the Digital Communications team.
Components:
Content Block Padding:
- .no-padding-{direction}, .no-margin-{direction) (top/bottom/left/right, removes padding or margin)
- .no-padding, .no-margin: removes all padding or margin
- .padding-{direction} (top/bottom/left/right, 1rem)
- .padding-{direction} -2x (top/bottom/left/right, 2rem)
Background Colors:
- .fiu-background-blue--magenta-burst
- .fiu-background-blue--gold-burst
- .fiu-background-cyan-to-gold
- .fiu-background-gold-to-cyan
- .fiu-background-blue / .blue
- .fiu-background-bright-gold
- .fiu-background-white, .white
- .fiu-background-cyan
- .fiu-background-gold
- .fiu-background-gray / .gray
Fonts:
- .font-frank-new
- .font-barlow
Font Colors:
- .fiu-gold
- .fiu-magenta
- .fiu-cyan
Text Formatting:
- .underline
- .break-word (word-break: break-all)
- .display-text
- .display-text--small
- .display-text--medium
- .display-text--large
UL Columns:
- .two-columns
- .three-columns
- ul.flex-cards: creates a flex list of list items
Floating/Aligning Media Content:
- .media-left, .media-right (floats to left or right on desktop, suggest using the figure tag)
Visibility:
- .show-for-sr (screen ready only)
- .hide-for-sr
- .invisible (visibility: hidden)
- .hide (display: none)
- .show-for-touch
- .hide-for-touch
- .show-for-print
- .hide-for-print
Miscellaneous:
- Energy Lines
- .left/.right (float direction, best to use .media-left, .media-right in content blocks)
- .clearfix