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)