Custom CSS Classes

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:

• Buttons
• CTA Links
• Round Media
• Simple Gallery

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-blue
• .fiu-background-bright-gold
• .fiu-background-white
• .fiu-background-cyan
• .fiu-background-gold
• .fiu-background-gray

Fonts:

• .font-frank-new
• .font-furore

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
• .pretitle

Lists and Columns:

• .two-columns
• .three-columns
• ul.flex-cards: creates a flex list of list items
• .icon-list.green-check-list: creates a list with green check marks
• .icon-list.round-check-list: creates a list with circled check marks
• .icon-list.x-list: creates a list with red X marks

Floating/Aligning Media Content:

• .media-left, .media-right (floats to left or right on desktop, suggest using the figure tag)

Rounded Corners:

• .border-radius-sm
• .border-radius-md
• .border-radius-lg

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

View additional visibility classes

Miscellaneous:

• Energy Lines
• .left/.right (float direction, best to use .media-left, .media-right in content blocks)
• .clearfix