Skip to content

Main Navigation

What are helper classes?

Helper classes are additional styling elements that can be added to snippets and page elements.  Below is a complete list of helper classes, categorized under their corresponding snippet in alphabetical order.


Where are helper classes added?

Unless otherwise noted, helper classes are added in the following locations:

Classes marked with an * are found in the styles dropdown in the WYSIWYG toolbar.

The helper classes list

 

A


 

Accordion

These classes are added in the table properties.

Class Name Description
has-border Table property class to add border around accordion items.
hvr-dark-gray Adds a dark gray hover and selected state to accordion items.
hvr-u-red Adds a red hover and selected state to accordion items.
heading-x Table property class to change the accordion item heading level. By default the accordion item headings are h3 headings. Replace the x in the class with a heading level 1 to 6.
Icons: Font Awesome classes with an underscore between the first and second class names. Add a slightly modified Font Awesome class to the table cell properties. Example: if the Font Awesome class is "fal fa-air-freshener", the class added to the table cell property would be "fal_fa-air-freshener". Replace the space in the class name with an underscore character.

B


 

Back-To-Top Link

These classes are added in the body class under page parameters.

Class Name Description
no-top-link Hides the back-to-top link.

 

Blog

These classes are added in the body class under page parameters.

Class Name Description
share-float Turns on the floating shared icon for the page.
no-post-social Turns off the static shared icon for the blog post page (often used in conjunction with the shared-float class which turns on the floating share social icons).

 

Breadcrumb

These classes are added in the body class under page parameters.

Class Name Description
no-breadcrumb Turn off the breadcrumb navigation
no-breadcrumb-item3 Remove third item in the breadcrumb list (used primarily for blog pages to remove redundant Post folder).
no-breadcrumb-item4 Remove fourth item in the breadcrumb list (used primarily for blog pages to remove redundant Post folder).

 

Buttons

These classes are added in the link properties.

Class Name Description
uu-btn Base class for all buttons. This is the default red color
white White button
light-gray Light gray button
medium-gray Medium gray button
dark-gray Dark gray button
ghost Ghost (transparent) button -- used over dark background areas
large Large button
small Small button
block Block button -- fills the parent container width
no-arrow Remove arrow icon from button
text-left Align the text on the button to the left.

C


 

Carousel

These classes are added in the table properties.

Class Name Description
ext-btns Position buttons outside of the carousel content
autoplay Sets the carousel to automatically rotate through the slides.
controls-bottom-right Position the pause/play controls at the bottom right side of the carousel.

 

Columns - Custom Width

These classes are added in the table properties.

Class Name Description
stretch Stretch the columns so they fill the available horizontal space.
has-border Show column borders.
ghost-border Make the border transparent but keep the column padding.
remove-overflow-border Removes the column border but keeps the padding. Used primarily in conjunction with overflow images.
border-shadow  Adds a drop-shadow behind each column.
hover-shadow  Adds a drop-shadow when the column is hovered over.
hover-link Gives the column a hover state. Best when used in columns containing only one link. The column link URL is set from the first link in the column.  
white Add white background color to all columns.
light-gray Add light gray background color to all columns.
medium-gray Add medium gray background color to all columns.
dark-gray Add dark gray background color to all columns.
u-red  Add u red background color to all columns.
pin-bottom Pin the last item in each column to the bottom center of the column.
pin-left Used in conjunction with pin-bottom class to pin the last item in each column to the bottom left.  
pin-right Used in conjunction with pin-bottom class to pin the last item in each column to the bottom right.
filter-light Makes each column have a light translucent background.
filter-dark Makes each column have a dark translucent background.
center-content Vertically and horizontally center content in columns.
align-left Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the left.
align-right Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the right.
offset-top-sm Create a small offset to move item up. This class is intended to allow items to straddle section borders.
offset-top-md Create a medium offset to move item up. This class is intended to allow items to straddle section borders.
offset-top-lg Create a large offset to move item up. This class is intended to allow items to straddle section borders.
offset-bottom-sm Create a small offset to move item down. This class is intended to allow items to straddle section borders.
offset-bottom-md Create a medium offset to move item down. This class is intended to allow items to straddle section borders.
offset-bottom-lg Create a large offset to move item down. This class is intended to allow items to straddle section borders.
uu-tab-row Removes margin spacing between cell items to create a row of tabs. Best when used on a grid with one row.
wrap-left Cells that don't fit on one line will be wrapped and begin stacking from the left.
wrap-right Cells that don't fit on one line will be wrapped and begin stacking from the right.

G


 

Grid Filter

These classes are added in the table properties.

Class Name Description
has-border Show grid borders.
ghost-border Make the border transparent but keep the cell padding.
remove-overflow-border Removes the cell border but keeps the padding. Used primarily in conjunction with overflow images.
border-shadow Adds a drop-shadow behind each grid cell.
hover-shadow Adds a drop-shadow to each grid cell when it's hovered over.
hover-link Gives each grid cell a hover state. Best when used in cell containing only one link. The cell link URL is set from the first link in the cell.  
white Add white background color to all grid cells.
light-gray Add light gray background color to all grid cells.
medium-gray Add medium gray background color to all grid cells.
dark-gray Add dark gray background color to all grid cells.
u-red Add u red background color to all grid cells.
pin-bottom Pin the last item to the bottom center of the cell.
pin-left Used in conjunction with pin-bottom class to pin the last item in each cell to the bottom left.
pin-right Used in conjunction with pin-bottom class to pin the last item in each cell to the bottom right.
filter-light The grid cells will have a light translucent background.
filter-dark The grid cells will have a dark translucent background.
center-content Vertically and horizontally center content in grid cells.
align-left Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the left.
align-right Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the right.

 

Grid Filter - Checkboxes

These classes are added in the table properties.

Class Name Description
control-btns Turns on the “select all” and “deselect all” buttons for the grid filter.

 

Grid Layout

These classes are added in the table properties.

Class Name Description
stretch Stretch the cells so they fill the available horizontal space.
has-border Show grid borders.
ghost-border Make the border transparent but keep the cell padding.
remove-overflow-border Removes the cell border but keeps the padding. Used primarily in conjunction with overflow images.
border-shadow Adds a drop-shadow behind each grid cell.
hover-shadow  Adds a drop-shadow to each grid cell when it's hovered over.
hover-link Gives each grid cell a hover state. Best when used in cell containing only one link. The cell link URL is set from the first link in the cell.  
white Add white background color to all grid cells.
light-gray Add light gray background color to all grid cells.
medium-gray Add medium gray background color to all grid cells.
dark-gray Add dark gray background color to all grid cells.
u-red Add u red background color to all grid cells.
pin-bottom Pin the last item to the bottom center of the cell.
pin-left Used in conjunction with pin-bottom class to pin the last item in each cell to the bottom left.
pin-right Used in conjunction with pin-bottom class to pin the last item in each cell to the bottom right.
filter-light The grid cells will have a light translucent background.
filter-dark The grid cells will have a dark translucent background.
center-content Vertically and horizontally center content in grid cells.
align-left Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the left.
align-right Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the right.
offset-top-sm Create a small top offset to move item up. This class is intended to allow items to straddle section borders.
offset-top-md Create a medium offset to move item up. This class is intended to allow items to straddle section borders.
offset-top-lg Create a large offset to move item up. This class is intended to allow items to straddle section borders.
offset-bottom-sm Create a small offset to move item down. This class is intended to allow items to straddle section borders.
offset-bottom-md Create a medium offset to move item down. This class is intended to allow items to straddle section borders.
offset-bottom-lg Create a large offset to move item down. This class is intended to allow items to straddle section borders.
uu-tab-row Removes margin spacing between cell items to create a row of tabs. Best when used on a grid with one row.
wrap-left Cells that don't fit on one line will be wrapped and begin stacking from the left.
wrap-right Cells that don't fit on one line will be wrapped and begin stacking from the right.
eq-height-cells Makes all the cells in the grid (or multiple grids on sampe page) the same height.

H


 

Horizontal Line (rule)

These classes are added to a horizontal line using the styles dropdown.

Class Name Description
*  hr-u-red Red full width horizontal line.
*  hr-u-red-sm Red small width horizontal line.
*  hr-u-red-md Red medium width horizontal line.
*  hr-u-red-lg Red large width horizontal line.
*  hr-light-gray Light gray full width horizontal line.
*  hr-light-gray-sm Light gray small width horizontal line.
*  hr-light-gray-md Light gray medium width horizontal line.
*  hr-light-gray-lg Light gray large width horizontal line.
*  hr-medium-gray Medium Gray full width horizontal line.
*  hr-medium-gray-sm Medium Gray small width horizontal line.
*  hr-medium-gray-md Medium Gray medium width horizontal line.
*  hr-medium-gray-lg Medium Gray large width horizontal line.
*  hr-dark-gray Dark Gray full width horizontal line.
*  hr-dark-gray-sm Dark Gray small width horizontal line.
*  hr-dark-gray-md Dark Gray medium width horizontal line.
*  hr-dark-gray-lg Dark Gray large width horizontal line.

I


 

Images

These classes are added in the image properties.

Class Name Description
*  img-rounded Add rounded corners to image
*  img-circle Makes the image a circle (if the height and width are the same)
*  img-thumbnail Add rounded corners and border to image
*  img-float-right Float image right
img-float-right-sm Float image right on small screens
img-float-right-md Float image right on medium screens
img-float-right-lg Float image right on large screens
*  img-float-left Float image left
img-float-left-sm Float image left on small screens
img-float-left-md Float image left on medium screens
img-float-left-lg Float image left on large screens
*  img-center Center image
img-center-sm Center image on small screens
img-center-md Center image on medium screens
img-center-lg Center image on large screens
* img-full-width Make the image fill the horizontal space.
img-overflow-sides Image will overflow the content area into the horizontal padding (used on images within panels and regions).
img-overflow-top Image will overflow the content area into the top padding (used on images within panels and regions).
img-overflow-bottom Image will overflow the content area into the bottom padding (used on images within panels and regions).

 

Images (linked)

These classes are added in the link properties.

Class Name Description
hvr-grow Link class for grow hover effect
hvr-fade Link class for fade hover effect

 

Image with Caption

These classes are added in the table properties.

Class Name Description
has-border Adds border around image and caption.
width-quarter Limit the image and caption area width to one quarter of the available space.
width-third Limit the image and caption area width to one third of the available space.
width-half Limit the image and caption area width to one half of the available space.
position-left Float the image and caption area to the left. Often used in conjunction with the width limiting classes.
position-center Center the image and caption area. Often used in conjunction with the width limiting classes.
position-right Float the image and caption area to the right. Often used in conjunction with the width limiting classes.

 

Image Gallery

These classes are added in the link properties.

Class Name Description
 u-gallery-xxx Each unique gallery class will create a new gallery. The link title attribute becomes the caption for the gallery item. The URL property links to the larger gallery image.

 

Image Overlay

These classes are added in the table properties.

Class Name Description
filter-dark Adds dark shade to image overlay.
has-border

Adds a border around the image overlay.

static-caption

Remove caption hover animation and overlay text on bottom of image.

L


 

Links

These classes are added in the link properties.

Class Name Description
link-no-underline Removes default underline from linked text.
link-hvr-underline Adds the underline to linked text hover state.

 

Lists

These classes are added to the list tag in the source code. You can also use the v3-Number List snippet.

Class Name Description
number-list Class added to the ordered list to create list with large styled numbers. This can also be implemented using the v3-Number List snippet.

M


 

Main Navigation Icons

These classes are added to the list tag in the source code.

Class Name Description
Icons: Font Awesome classes with an underscore between the first and second class names.

Top level menu items can have icons. Add a slightly modified Font Awesome class to the link anchor tag properties. Example: if the Font Awesome class is "fal fa-air-freshener", the class added to the table cell property would be "fal_fa-air-freshener". Replace the space in the class name with an underscore character.

 

Margins - Custom

These classes are added to elements in the styles dropdown.

Class Name Description
*  margin-top-1x Adds one character space margin to the top.
*  margin-top-2x Adds two character space margin to the top.
*  margin-top-3x Adds three character space margin to the top.
*  margin-bottom-1x Adds one character space margin to the bottom.
*  margin-bottom-2x Adds two character space margin to the bottom.
*  margin-bottom-3x Adds three character space margin to the bottom.
*  margin-left-1x Adds one character space margin to the left.
*  margin-left-2x Adds two character space margin to the left.
*  margin-left-3x Adds three character space margin to the left.
*  margin-right-1x Adds one character space margin to the right.
*  margin-right-2x Adds two character space margin to the right.
*  margin-right-3x Adds three character space margin to the right.

 

Marquee

These classes are added in the body class under page parameters.

Class Name Description
marquee-bg-left Aligns marquee background image to the left.
marquee-bg-right Aligns marquee background image to the right.
marquee-bg-top Aligns marquee background image to the top.
marquee-bg-bottom Aligns marquee background image to the bottom.
marquee-contain Makes the entire default marquee image visible within the marquee area.
marquee-no-shade Turn off the marquee shade behind the caption area

 

Modal

These classes are added in the table properties.

Class Name Description
modal-xxx (default is "modal-name"). If there is more than one modal pop-up on a page, they each need to have a unique modal name in the properties (xxx portion of class is replace by custom name).

 

Modal Links

These classes are added in the link properties.

Class Name Description
modal-link Class added to the modal link item property.
#modal-xxx Modal link URL points to a unique modal name set in the modal snippet table property.

P


 

Panel

These classes are added in the table properties.

Class Name Description
full-height Makes the panel full height of the containing region.
pin-bottom Pin the last item in the panel to the bottom. This can also be applied as a section class to pin the last item in each region.
pin-left Used in conjunction with pin-bottom class to pin the last item to the bottom left of the panel. This can also be applied as a section class to pin the last item in each region.
pin-right Used in conjunction with pin-bottom class to pin the last item to the bottom right of the panel. This can also be applied as a section class to pin the last item in each region.
width-quarter Limit the panel width to one quarter of the available space.
width-third Limit the panel width to one third of the available space.
width-half Limit the panel width to one half of the available space.
position-left

Float the panel to the left. Used in conjunction with one of the classed to limit the panel width.

position-center Center the panel in the available space. Used in conjunction with one of the classed to limit the panel width.
position-right Float the panel to the right. Used in conjunction with one of the classes to limit the panel width.
center-content Vertically and horizontally center content in panel.
align-left Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the left.
align-right Used in conjunction with the "center-content" helper class to center content vertically while aligning content to the right.
no-border Removes the panel border and padding.
ghost-border Make the border transparent but keep the panel padding.
bg-contain Make the entire background image fit within the panel area.
bg-fixed Set the background image position to fixed. This prevents the image from moving as the window is scrolled.
bg-left Align the background image to the left.
bg-right Align the background image to the right.
bg-top Align the background image to the top.
bg-bottom Align the background image to the bottom.
filter-light Sets the panel to have a light translucent background.
filter-dark Sets the panel to have a dark translucent background.
hover-link Gives the panel a hover state. Best when used in panel containing only one link. The panel link URL is set from the first link in the panel.
remove-overflow-border Removes the panel border but keeps the padding. Used primarily in conjunction with overflow images. 
border-shadow Adds a drop-shadow behind the panel.
hover-shadow Adds a drop-shadow when the panel is hovered over.
thumbnail-sm Small thumbnail format with image on the left. Used in conjunction with the hover-link class.
thumbnail-md Medium thumbnail format with image on the left. Used in conjunction with the hover-link class.
thumbnail-lg Large thumbnail format with image on the left. Used in conjunction with the hover-link class.
single-line Used if there is one line of text and it needs to be vertically centered. Used in conjunction with the hover-link class.
extend-width Extends the panel width to fill the screen.
top-stack Used on a panel, which is the first item of a section, to shift the panel up to cover the section top margin. (used in conjunction with extend-width class)
bottom-stack Used on a panel, which is the last item of a section, to shift the panel down to cover the section bottom margin. (used in conjunction with extend-width class)
min-height-300 Set the minimum height of the panel to 300 pixels.
min-height-500 Set the minimum height of the panel to 500 pixels.
min-height-700 Set the minimum height of the panel to 700 pixels.
 offset-top-sm Create a small offset to move item up. This class is intended to allow items to straddle section borders.
offset-top-md Create a medium offset to move item up. This class is intended to allow items to straddle section borders. 
offset-top-lg Create a large offset to move item up. This class is intended to allow items to straddle section borders.
offset-bottom-sm Create a small offset to move item down. This class is intended to allow items to straddle section borders.
offset-bottom-md Create a medium offset to move item down. This class is intended to allow items to straddle section borders.
offset-bottom-lg Create a large offset to move item down. This class is intended to allow items to straddle section borders.

 

Panel Flip

These classes are added in the table properties.

Class Name Description
width-quarter Limit the flip panel width to one quarter of the available space.
width-third Limit the flip panel width to one third of the available space.
width-half Limit the flip panel width to one half of the available space.
position-left Float the flip panel to the left. Used in conjunction with one of the classes to limit the flip panel width.
position-center Center the flip panel in the available space. Used in conjunction with one of the classes to limit the flip panel width.
position-right Float the flip panel to the right. Used in conjunction with one of the classes to limit the flip panel width.

S


 

Search

These classes are added in the body class under page parameters.

Class Name Description
no-search Body class to turn off the search box.
no-site-search Body class to remove the site search option.

 

Section

These items are added in the section class under page parameters.

Class Name Description
pin-bottom Pins the last item in each region in the section to the bottom.
pin-left Used in conjunction with pin-bottom class to pin the last item in each region to the bottom left.
pin-right Used in conjunction with pin-bottom class to pin the last item in each region to the bottom right.
bg-contain Make the entire background image fit within the section area.
bg-left Align the background image to the left.
bg-right Align the background image to the right.
bg-top Align the background image to the top.
bg-bottom Align the background image to the bottom.
center-content Vertically and horizontally center content in regions.
align-left Used in conjunction with the "center-content" helper class to center region content vertically while aligning content to the left.
align-right Used in conjunction with the "center-content" helper class to center region content vertically while aligning content to the right.
extend-region Extends the width of the first region in the section to fill the window width. Use only on sections with one region.
ghost-border Make the region borders hidden but keep the region padding.
min-height-300 Set the minimum height of the section to 300 pixels.
min-height-500 Set the minimum height of the section to 500 pixels.
min-height-700 Set the minimum height of the section to 700 pixels.
slope-right Slopes both top and bottom of section to the right.
slope-right-top Slopes only the top of section to the right.
slope-right-bottom Slopes only the bottom of section to the right.
slope-left Slopes both top and bottom of section to the left.
slope-left-top Slopes only the top of section to the left.
slope-left-bottom Slopes only the bottom of section to the left.
wrap-left Regions that don't fit on one line will be wrapped and begin stacking from the left.
wrap-right Regions that don't fit on one line will be wrapped and begin stacking from the right.

T


 

Table

These classes are added in the table properties.

Class Name Description
*  uu-table Default table styles.
*  bordered Table with bordered cells.
*  header-dark Dark gray table header cells.
* header-medium Medium gray table header cells.
*  header-light Light gray table header cells.
*  striped Shade alternating table rows.
*  compressed Reduces the padding in the table cells.
td-span-sm Collapse table cells to fill the full width of the available space on small screens.
td-span-md Collapse table cells to fill the full width of the available space on medium screens.
td-span-lg Collapse table cells to fill the full width of the available space on large screens.

 

Text

These classes are added to elements in the styles dropdown.

Class Name Description
*  h1 Faux heading 1
*  h2 Faux heading 2
*  h3 Faux heading 3
*  h4 Faux heading 4
*  h5 Faux heading 5
*  h6 Faux heading 6
*  text-callout-sm Callout small
*  text-callout-md Callout medium
*  text-callout-lg Callout large
*  text-left Float text left
*  text-right Float text right
*  text-center Center text
*  text-default-case Default text case
*  text-lowercase Lowercase text
*  text-uppercase Uppercase text
*  text-normal Normal font weight
*  text-bold Bold text
*  text-drop-cap Applies drop cap to initial character of paragraph.
* text-heading-line Applies a decorative underline at the beginning of the text (generally used for headings).
* text-heading-vline Applies a decorative vertical line at the beginning of the text (generally used for headings).
* text-sm Makes text small.
* sr-only Visually hide the text but it is still read by a screen reader application (or search crawler).
* clearfix Clears floated items in the following content.

V


 

Video (Responsive)

These classes are added in the table properties.

Class Name Description
width-quarter Limit the video width to one quarter of the available space.
width-third Limit the video width to one third of the available space.
width-half Limit the video width to one half of the available space.
position-left Float the video to the left. Used in conjunction with one of the classes to limit the video width.
position-center Center the video in the available space. Used in conjunction with one of the classes to limit the video width.
position-right Float the video to the right. Used in conjunction with one of the classes to limit the video width.

 

Resources


Video Tutorials

(COMING SOON)


Layout Examples Library

(COMING SOON)

Last Updated: 3/1/22