white-boxes - Makes the content box background white.
Usable on: Section CSS Classes field, Content Box CSS field

grey-boxes - Makes the content box background grey.
Usable on: Section CSS Classes field, Content Box CSS field

primary-theme-boxes - Makes the content box background as the primary theme colour.
Usable on: Section CSS Classes field, Content Box CSS field

box-shadow - Render box shadow on the box.
Usable on: Section CSS Classes field, Content Box CSS field

box-border - Display content box with border.
Usable on: Section CSS Classes field, Content Box CSS field

image-above-content-for-medium - Change content box layout to image-above-content on tablet only.
Usable on: Section CSS Classes field

CSS:

.white-boxes .hic-box {
  background-color: #fff;
  color: initial;
}

.grey-boxes .hic-box {
  background-color: #f2f2f2;
  color: initial;
}

.white-boxes .hic-content,
.grey-boxes .hic-content {
  padding: 15px;
}

.grey-boxes.image-above-content .hic-image,
.white-boxes.image-above-content .hic-image{
  margin-bottom: 0;
}

.box-shadow .hic-box {
  box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, .15);
}

.box-border .hic-box {
  border: 1px solid #e9e9e9;
}

@media (max-width: 640px){
  .grey-boxes.content-box-element:not(.image-overlay-content) .hic-image,
  .white-boxes.content-box-element:not(.image-overlay-content) .hic-image{
      margin-bottom: 0;
  }
}

@media (min-width: 641px) and (max-width: 1023px){
  .image-above-content-for-medium .hic-box {
    display: block !important;
  }

  .image-above-content-for-medium .hic-image-container, 
  .image-above-content-for-medium .hic-content {
    width: 100% !important;
  }

  .image-above-content-for-medium .hic-content {
    padding: 0 !important;
  }

  .image-above-content-for-medium .hic-image{
    margin-bottom: 20px;
  }
}

two-col-for-medium - Forcibly change section body columns width two 50%.
Usable on: Section CSS Classes field

full-col-for-medium - Forcibly change section body columns width to full width.
Usable on: Section CSS Classes field

CSS:

@media (min-width: 641px) and (max-width: 1023px){
  .two-col-for-medium .section-body .cell {
    width: 50% !important;
  }

  .full-col-for-medium .section-body .cell {
    width: 100% !important;
  }
}

block - Change any element display to block and make the width 100%.
Usable on: Any Element

CSS:

.block {
    width: 100%;
    display: block;
}

inline-choices - Make a gravity form field checkbox and radio item inlined.
Usable on: Gravity Form field

clear-mask - Make a gravity form field a mask field removing the underline of the mask. You have to combine the following field mask helper class to force the a masking format:

Field Mask Helper Class	Description
phone	Force a 10 digit phone field masking format
postcode	Force a 4 digit postcode field masking format

Usable on: Gravity Form field

no-top-label - Hide gravity form field label. Make sure to add Placeholder on the field when using this.

Usable on: Gravity Form field

field-screensize-x - (Where screensize is small | medium | large and x is field width from 1 - 12). Change the width of field. Example field-medium-6 will make the field width in half starting from tablet to wide screen devices.
Usable on: Gravity Form field

CSS:

.gfield.inline-choices ul li {
  display: inline-block;
  margin-right: 24px;
}

.gform_wrapper .no-top-label .gfield_label {
  display: none;
}

.gform_body .gform_fields{
  display: flex;
  flex-wrap: wrap;
  margin-left: -.5375rem;
  margin-right: -.5375rem;
}

.gform_fields > .gfield {
  width: 100%;
  padding-left: .5375rem;
  padding-right: .5375rem;
}

.gform_fields > .gfield.field-small-12 {
  width: 100%;
}

.gform_fields > .gfield.field-small-11 {
  width: 91.66667%;
}

.gform_fields > .gfield.field-small-10 {
  width: 83.33333%;
}

.gform_fields > .gfield.field-small-9 {
  width: 75%;
}

.gform_fields > .gfield.field-small-8 {
  width: 66.66667%;
}

.gform_fields > .gfield.field-small-7 {
  width: 58.33333%;
}

.gform_fields > .gfield.field-small-6 {
  width: 50%;
}

.gform_fields > .gfield.field-small-5 {
  width: 41.66667%;
}

.gform_fields > .gfield.field-small-4 {
  width: 33.33333%;
}

.gform_fields > .gfield.field-small-3 {
  width: 25%;
}

.gform_fields > .gfield.field-small-2 {
  width: 16.66667%;
}

.gform_fields > .gfield.field-small-1 {
  width: 8.33333%;
}

@media (min-width: 641px){
  .gform_fields > .gfield.field-medium-12 {
      width: 100%;
  }

  .gform_fields > .gfield.field-medium-11 {
      width: 91.66667%;
  }

  .gform_fields > .gfield.field-medium-10 {
      width: 83.33333%;
  }

  .gform_fields > .gfield.field-medium-9 {
      width: 75%;
  }

  .gform_fields > .gfield.field-medium-8 {
      width: 66.66667%;
  }

  .gform_fields > .gfield.field-medium-7 {
      width: 58.33333%;
  }

  .gform_fields > .gfield.field-medium-6 {
      width: 50%;
  }

  .gform_fields > .gfield.field-medium-5 {
      width: 41.66667%;
  }

  .gform_fields > .gfield.field-medium-4 {
      width: 33.33333%;
  }

  .gform_fields > .gfield.field-medium-3 {
      width: 25%;
  }

  .gform_fields > .gfield.field-medium-2 {
      width: 16.66667%;
  }

  .gform_fields > .gfield.field-medium-1 {
      width: 8.33333%;
  }
}

@media (min-width: 1024px){
  .gform_fields > .gfield.field-large-12 {
      width: 100%;
  }

  .gform_fields > .gfield.field-large-11 {
      width: 91.66667%;
  }

  .gform_fields > .gfield.field-large-10 {
      width: 83.33333%;
  }

  .gform_fields > .gfield.field-large-9 {
      width: 75%;
  }

  .gform_fields > .gfield.field-large-8 {
      width: 66.66667%;
  }

  .gform_fields > .gfield.field-large-7 {
      width: 58.33333%;
  }

  .gform_fields > .gfield.field-medium-6 {
      width: 50%;
  }

  .gform_fields > .gfield.field-large-5 {
      width: 41.66667%;
  }

  .gform_fields > .gfield.field-large-4 {
      width: 33.33333%;
  }

  .gform_fields > .gfield.field-large-3 {
      width: 25%;
  }

  .gform_fields > .gfield.field-large-2 {
      width: 16.66667%;
  }

  .gform_fields > .gfield.field-large-1 {
      width: 8.33333%;
  }
}

box-equal-height - Make hic-box container heights equal.
Usable on: Section CSS Classes field

content-equal-height - Make hic-content container heights equal, allowing content boxes content height the same.
Usable on: Section CSS Classes field

blurb-equal-height - Make hic-blurb container heights equal, allowing only the blurb height of the content box the same.
Usable on: Section CSS Classes field

title-equal-height - Make the title of each content boxes, equal.
Usable on: Section CSS Classes field

hidden or hide - hide anything that have this class.
Usable on: Any Element

hide-title or hide-titles - hide content box title or hic-title container.
Usable on: Section CSS Classes field, Content Box CSS field

hide-blurb or hide-blurbs - hide content box blurb or hic-blurb container.
Usable on: Section CSS Classes field, Content Box CSS field

button-hidden - hide button inside the section body container.
Usable on: Section CSS Classes field, Content Box CSS field

CSS:

.hidden{
  display: none;
}

.hide-title .hic-title, .hide-titles .hic-title, 
.hide-blurb .hic-blurb, .hide-blurbs .hic-blurb, 
.button-hidden .section-body .hic-button-wrap {
  display: none !important;
}

---

Foundation Helper Classes

show-for-small-only or hide-for-medium - Show the element on mobile devices only.
Usable on: Any Element

show-for-medium-only - Show the element on tablet devices only.
Usable on: Any Element

hide-for-medium-only - Hide the element on tablet devices and show on mobile and desktop
Usable on: Any Element

show-for-medium or hide-for-small-only - Show the element on any device except on mobile
Usable on: Any Element

hide-for-large or hide-for-large-only- Hide the element on desktop and show on both mobile and tablet.
Usable on: Any Element

show-for-large or show-for-large-only - Show the element on desktop only.
Usable on: Any Element

show-for-landscape - Show the element on landscape only.
Usable on: Any Element

show-for-portrait - Show the element on portrait only.
Usable on: Any Element

Background Position:

bp-top - makes the image background position on top.
Usable on: Section CSS Classes field, Content Box CSS field

bp-right - makes the image background position on right.
Usable on: Section CSS Classes field, Content Box CSS field

bp-bottom - makes the image background position on bottom.
Usable on: Section CSS Classes field, Content Box CSS field

bp-left - makes the image background position on left.
Usable on: Section CSS Classes field, Content Box CSS field

bp-top-left - makes the image background position on top left corner.
Usable on: Section CSS Classes field, Content Box CSS field

bp-top-right - makes the image background position on top right corner.
Usable on: Section CSS Classes field, Content Box CSS field

bp-top-center - makes the image background position on top and horizontally position to center.
Usable on: Section CSS Classes field, Content Box CSS field

bp-bottom-right - makes the image background position on bottom right  corner.
Usable on: Section CSS Classes field, Content Box CSS field

bp-bottom-left - makes the image background position on bottom left corner.
Usable on: Section CSS Classes field, Content Box CSS field

bp-bottom-center - makes the image background position on bottom and horizontally position to center.
Usable on: Section CSS Classes field, Content Box CSS field

CSS:

.bp-top .bg-helper, .bp-top .hic-image {
  background-position: top;
}

.bp-right .bg-helper, .bp-right .hic-image {
  background-position: right;
}

.bp-bottom .bg-helper, .bp-right .hic-image {
  background-position: bottom;
}

.bp-left .bg-helper, .bp-left .hic-image {
  background-position: left;
}

.bp-top-left .bg-helper, .bp-top-left .hic-image {
  background-position: top left;
}

.bp-top-center .bg-helper, .bp-top-center .hic-image {
  background-position: center top;
}

.bp-top-right .bg-helper, .bp-top-right .hic-image {
  background-position: top right;
}

.bp-bottom-left .bg-helper, .bp-bottom-left .hic-image {
  background-position: bottom left;
}

.bp-bottom-center .bg-helper, .bp-bottom-center .hic-image {
  background-position: center bottom;
}

.bp-bottom-right .bg-helper, .bp-bottom-right .hic-image {
  background-position: bottom right;
}

---

Image Size and Shape:

contain-images - Makes the content box images contain the background image, displaying the whole image in the box.
Usable on: Section CSS Classes field

square-images - Makes the content box images shape square on all device.
Usable on: Section CSS Classes field

landscape-images - Makes the content box images shape rectangle in landscape orientation.
Usable on: Section CSS Classes field

portrait-images - Makes the content box images shape rectangle in portrait orientation.
Usable on: Section CSS Classes field

long-portrait-images - Makes the content box images shape long rectangle in portrait orientation.
Usable on: Section CSS Classes field

round-images - Makes the content box images shape circle.
Usable on: Section CSS Classes field

CSS:

.page-element.contain-images .hic-image,
.sidebar-element.contain-images .hic-image {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.page-element.square-images .hic-image:before, .page-element.round-images .hic-image:before, .page-element.landscape-images .hic-image:before, .page-element.portrait-images .hic-image:before,
.sidebar-element.square-images .hic-image:before, .sidebar-element.round-images .hic-image:before, .sidebar-element.landscape-images .hic-image:before, .sidebar-element.portrait-images .hic-image:before {
  content: "";
  width: 100%;
  height: auto;
  display: block;
}

.page-element.square-images .hic-image:before, .page-element.round-images .hic-image:before, .page-element.box-images .hic-image::before,
.sidebar-element.square-images .hic-image:before, .sidebar-element.round-images .hic-image:before, .sidebar-element.box-images .hic-image::before {
  padding-top: 100%;
}

.page-element.landscape-images .hic-image:before,
.sidebar-element.landscape-images .hic-image:before {
  padding-top: 40%;
}

.page-element.portrait-images .hic-image:before,
.sidebar-element.portrait-images .hic-image:before {
  padding-top: 150%;
}

.page-element.long-portrait-images .hic-image::before,
.sidebar-element.long-portrait-images .hic-image::before {
  padding-top: 180%;
}

.page-element.round-images .hic-image,
.sidebar-element.round-images .hic-image {
  border-radius: 50%;
}

---

Other:

greyscale-images - Makes the hic-image's render greyscale.
Usable on: Section CSS Classes field, Content Box CSS field

whitescale-images - Makes the hic-image's render whitescale. This is best to use on PNG image that needs to be pure white when the container have background
Usable on: Section CSS Classes field, Content Box CSS field

flex-image-height - Makes the height of the content box image flexible, allowing the heights of the image equal to content. Use this on split type content box layout.
Usable on: Section CSS Classes field

disable-pointer - Disable the pointer events of all links <a>.
Usable on: Section CSS Classes field, Content Box CSS field, anchor tag

CSS:

.disable-pointer a, a.disable-pointer {
  pointer-events: none;
}

inline-list - Make the list item inlined.
Usable on: Section CSS Classes field, Content Box CSS field, Unordered List Tag

no-bullets or no-bullet - Remove the bullet list style.
Usable on: Unordered List Tag

checklist - Display the bullet list icon/style to . You can combine the following list helper class to change the checklist icon/style:

Style	List Class Helper
	times
	square
	round
	angle-right
	double-angle-right
	chevron-right

Usable on: Section CSS Classes field, Content Box CSS field, Unordered List Tag

legal-content - Display list element with large 1 line space on each item. Recommended to use only on privacy policy and terms pages.
Usable on: Page Custom CSS Classes field, Section CSS Classes field, List Tag

closed-alpha - Display number ordered list with open and close parentheses.
Usable on: Ordered List Tag

CSS:

.inline-list li, ul.inline-list li {
  display: inline-block;
}

ul.no-bullets, ul.no-bullet {
  list-style: none !important;
  margin-left: 0;
}

ul.checklist, .page-element.checklist ul {
  margin-left: 0;
  position: relative;
  list-style: none;
}

.checklist li, .page-element.checklist ul li {
  position: relative;
}

.checklist > li:before, .page-element.checklist ul li:before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Pro';
  position: absolute;
  left: 0;
  top: 0;
}

.checklist.times > li:before, .page-element.checklist.times ul li:before {
  content: '\f00d';
}

.checklist.square > li:before, .page-element.checklist.square ul li:before {
  content: '\f14a';
}

.checklist.round > li:before, .page-element.checklist.round ul li:before {
  content: '\f058';
}

.checklist.angle-right > li:before, .page-element.checklist.angle-right ul li:before {
  content: '\f105';
}

.checklist.double-angle-right > li:before, .page-element.checklist.double-angle-right ul li:before {
  content: '\f101';
}

.checklist.chevron-right > li:before, .page-element.checklist.chevron-right ul li:before {
  content: '\f054';
}

ol.steps-list li, .page-element.steps-list ol li {
  counter-increment: step-counter;
  list-style: none;
  position: relative;
}

ol.steps-list li:before, .page-element.steps-list ol li:before {
  content: counter(step-counter);
  display: block;
  position: absolute;
}

ol.steps-list li strong, .page-element.steps-list ol li strong {
  display: block;
}

.legal-content li {
  margin-bottom: 1rem;
}

ol.closed-alpha {
  list-style: none;
}

ol.closed-alpha li {
  position: relative;
}

ol.closed-alpha li::before {
  counter-increment: alpha;
  content: "("counter(alpha, lower-alpha) ") ";
  position: absolute;
  left: -32px;
}

modal-menu - Makes a menu element target/open a modal element. Make sure to add the modal element id selector to make it work. Default will target #modal-elem-0
Usable on: Menu item

menu-button - Makes a menu item looks like a button
Usable on: Header Menu item

wloc-base-url - Prepend the base location to the anchor-based url. Use this on Location and Location Post pages only.
Usable on: Menu item, and Anchor(a) tag

CSS:

.gfield.inline-choices ul li {
  display: inline-block;
  margin-right: 24px;
}

header-left - Position Page Element Header to left side of the section body
Usable on: Section CSS Classes field

footer-left - Position Page Element Footer to left side of the section body. Use this together with header-left.
Usable on: Section CSS Classes field

top-right-footer - Position Page Element Footer to top right corner
Usable on: Section CSS Classes field

CSS:

@media (min-width: 1024px) {
  .header-left .grid-container {
    display: table;
    width: 100%;
    margin: 0 auto;
  }

  .header-left .section-header, .footer-left .section-footer {
    float: left;
    width: 25%;
  }

  .default-alignment.header-left .section-header, .default-alignment.footer-left .section-footer,
  .text-left.header-left .section-header, .text-left.footer-left .section-footer {
    text-align: left;
  }

  .header-left .section-body {
    float: right;
    width: 75%;
  }


}

@media(min-width: 1024px) {
  .top-right-footer .section-footer {
        top: 14px;
  }

  .top-right-footer.page-element:not(.small-header) .section-header .cell {
        max-width: 750px;
        margin-left: 0;
  }
}

row-fluid - Make the section width full without padding and margin.
Usable on: Section CSS Classes field

small-row-fluid - Make the section width full without padding and margin on mobile device only.
Usable on: Section CSS Classes field

xsmall-container - Makes the section grid container maximum width to 700px
Usable on: Section CSS Classes field

small-container - Makes the section grid container maximum width to 900px
Usable on: Section CSS Classes field

medium-container - Makes the section grid container maximum width to 100px
Usable on: Section CSS Classes field

large-container - Makes the section grid container maximum width to 1440px
Usable on: Section CSS Classes field

CSS:

.row-fluid .grid-container {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

.row-fluid .cell {
  padding: 0 !important;
}

.full-width-layout .row-fluid .grid-container {
  padding-left: 0;
  padding-right: 0;
}

.row-fluid .hic-box, .fluid .hic-box {
  margin: 0 !important;
}

.default-width .xsmall-container .grid-container {
  max-width: 700px;
}

.default-width .small-container .grid-container {
  max-width: 900px;
}

.default-width .medium-container .grid-container {
  max-width: 1000px;
}

.default-width .large-container .grid-container {
  max-width: 1440px;
}

@media(max-width: 640px) {
  .small-row-fluid .grid-container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
}

show-carousel-dots - show the slider dots of any page element that display slider.
Usable on: Section CSS Classes field

hide-carousel-dots - hide the slider dots of any page element that display slider.
Usable on: Section CSS Classes field

hide-carousel-arrows - Hide the slider arrows of any page element that display slider.
Usable on: Section CSS Classes field

show-carousel-arrows - show the slider arrows of any page element that display slider.
Usable on: Section CSS Classes field

disable-carousel-for-large - Disable carousel on large screen, allowing to display page element with slider to display in grid layout
Usable on: Section CSS Classes field

carousel-center-mode - Enable carousel center mode. The default center padding of the carousel is 25%. Adjust your styling if necessary.
Usable on: Section CSS Classes field

carousel-adaptive-height - Enable carousel center mode. The default center padding of the carousel is 25%. Adjust your styling if necessary.
Usable on: Section CSS Classes field

vertical-carousel- Make the carousel slide vertically
Usable on: Section CSS Classes field

carousel-nav and carousel-for- Sync two content box carousel section. Note: Both section must be carousel and must have the same number of carousel item.
Usable on: Section CSS Classes field

disabled-carousel-infinite - Disable carousel infinite slides.
Usable on: Section CSS Classes field

Padding

padding-top-none - Make the top padding equals to 0
Usable on: Section CSS Classes field

padding-bottom-none - Make the bottom padding equals to 0
Usable on: Section CSS Classes field

pt-x - (where x = 0 | 5 | 10 | 15 | 30 | 35 | 40 | 45 | 50). This will make the top padding equals to x value. Example: pt-10 will make the top padding equals to 10
Usable on: Section CSS Classes field

pb-x - (where x = 0 | 5 | 10 | 15 | 30 | 35 | 40 | 45 | 50). This will make the top padding attribute equals to x value. Example: pb-10 will make the top padding equals to 10
Usable on: Section CSS Classes field

ptb-x - (where x = 0 | 5 | 10 | 15 | 30 | 35 | 40 | 45 | 50). This will make the top and bottom padding equals to x value. Example: ptb-10 will make both top and bottom padding equals to 10
Usable on: Section CSS Classes field

medium-pt-x - (where x = 60 | 80 100). This will make the top padding equals to x value from tablet to desktop. Example: medium-pt-100 will make the top padding equals to 100 from 641px media width
Usable on: Section CSS Classes field

medium-pb-x - (where x = 60 | 80 100). This will make the bottom padding equals to x value from tablet to desktop. Example: medium-pb-100 will make the bottom padding equals to 100 from 641px media width
Usable on: Section CSS Classes field

CSS:

pt-0, padding-top-none, ptb-0 {padding-top: 0 !important;}
pt-5, ptb-5 {padding-top: 5px !important;}
pt-10, ptb-10 {padding-top: 10px !important;}
pt-15, ptb-15 {padding-top: 15px !important;}
pt-20, ptb-20 {padding-top: 20px !important;}
pt-25, ptb-25 {padding-top: 25px !important;}
pt-30, ptb-30 {padding-top: 30px !important;}
pt-35, ptb-35 {padding-top: 35px !important;}
pt-40, ptb-40 {padding-top: 40px !important;}
pt-45, ptb-45 {padding-top: 45px !important;}
pt-50, ptb-50 {padding-top: 50px !important;}

pb-0, padding-bottom-none, ptb-0 {padding-bottom: 0 !important;}
pb-5, ptb-5 {padding-bottom: 5px !important;}
pb-10, ptb-10 {padding-bottom: 10px !important;}
pb-15, ptb-15 {padding-bottom: 15px !important;}
pb-20, ptb-20 {padding-bottom: 20px !important;}
pb-25, ptb-25 {padding-bottom: 25px !important;}
pb-30, ptb-30 {padding-bottom: 30px !important;}
pb-35, ptb-35 {padding-bottom: 35px !important;}
pb-40, ptb-40 {padding-bottom: 40px !important;}
pb-45, ptb-45 {padding-bottom: 45px !important;}
pb-50, ptb-50 {padding-bottom: 50px !important;}

@media (min-width: 641px) {
  .medium-pt-60 { padding-top: 60px !important; }
  .medium-pt-80 { padding-top: 80px !important; }
  .medium-pt-100 { padding-top: 100px !important; }

  .medium-pb-60 { padding-bottom: 60px !important; }
  .medium-pb-80 { padding-bottom: 80px !important; }
  .medium-pb-100 { padding-bottom: 100px !important; }
}

---

Margin

margin-top-none - Make the margin top equal to 0
Usable on: Section CSS Classes field

margin-bottom-none - Make the margin bottom equal to 0
Usable on: Section CSS Classes field

mt-x - (where x = 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50). This will make the top margin equals to x value. Example: mt-10 will make the top margin equals to 10 from 641px media width
Usable on: Section CSS Classes field

mb-x - (where x = 0 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50). This will make the bottom margin equals to x value. Example: mb-10 will make the top margin equals to 10 from 641px media width
Usable on: Section CSS Classes field

CSS:

.mt-0, .margin-top-none, .mtb-0 { margin-top: 0 !important; }
.mt-5, .mtb-5 { margin-top: 5px !important; }
.mt-10, .mtb-10 { margin-top: 10px !important; }
.mt-15, .mtb-15 { margin-top: 15px !important; }
.mt-20, .mtb-20 { margin-top: 20px !important; }
.mt-25, .mtb-25 { margin-top: 25px !important; }
.mt-30, .mtb-30 { margin-top: 30px !important; }
.mt-35, .mtb-35 { margin-top: 35px !important; }
.mt-40, .mtb-40 { margin-top: 40px !important; }
.mt-45, .mtb-45 { margin-top: 45px !important; }
.mt-50, .mtb-50 { margin-top: 50px !important; }

.mb-0, .margin-bottom-none, .mtb-0 { margin-bottom: 0 !important; }
.mb-5, .mtb-5 { margin-bottom: 5px !important; }
.mb-10, .mtb-10 { margin-bottom: 10px !important; }
.mb-15, .mtb-15 { margin-bottom: 15px !important; }
.mb-20, .mtb-20 { margin-bottom: 20px !important; }
.mb-25, .mtb-25 { margin-bottom: 25px !important; }
.mb-30, .mtb-30 { margin-bottom: 30px !important; }
.mb-35, .mtb-35 { margin-bottom: 35px !important; }
.mb-40, .mtb-40 { margin-bottom: 40px !important; }
.mb-45, .mtb-45 { margin-bottom: 45px !important; }
.mb-50, .mtb-50 { margin-bottom: 50px !important; }

---

Other

small-spacing - Makes the cell spacing small, generating only 15px space between each cell.
Usable on: Section CSS Classes field

CSS:

.page-element.grid.small-spacing .cell,
.sidebar-element.grid.small-spacing .cell {
  margin-bottom: 15px;
}

@media (min-width: 1024px) {
  .page-element.small-spacing .grid-padding-x, 
  .page-element.small-spacing .grid-padding-x>.cell,
  .page-element.small-spacing .grid-padding-x .slick-track > .cell,
  .sidebar-element.small-spacing .grid-padding-x, 
  .sidebar-element.small-spacing .grid-padding-x>.cell,
  .sidebar-element.small-spacing .grid-padding-x .slick-track > .cell{
    padding-left: 7.5px;
    padding-right: 7.5px;
  }
}

uppercase - transfrom text to all capital letters.
Usable on: Any Text or Text Container Element

lowercase - transfrom text to all small letters.
Usable on: Any Text or Text Container Element

pre-line - Make text white-spaces pre-lined.
Usable on: Any Text or Text Container Element

light-text or light-font - Make the text font weight = 300
Usable on: Any Text or Text Container Element

lead - Make the text stands out and show as lead text. You may need to add more styling depending on the website design. This helper may be differ on the selected theme
Usable on: Any Text or Text Container Element

white-titles - Change content boxes title color to white
Usable on: Section CSS Classes field, Content Box CSS field

h1 | h2 | h3 | h4 | h5 | h6 - Makes the text styling the same as the corresponding heading element. This may differ on the selected theme. You might also need to adjust this on child stylesheet if needed.
Usable on: Any Text Element

CSS:

.uppercase {
  text-transform: uppercase !important;
}

.lowercase {
  text-transform: lowercase;
}

.pre-line {
  white-space: pre-line;
}

.light-text, .light-font {
  font-weight: 300 !important;
}

.white-titles .hic-title h3 {
  color: #fff !important;
}

stick-to-top - Make an element stick to the top page or below the sticky header once the element reached the top/sticky header on scroll. Below are the similar helper

stick-to-top-for-small-only - Stick only for mobiles.

stick-to-top-for-medium - Stick only for tablet and desktop

stick-to-top-for-medium-only - Stick only for tablet

stick-to-top-for-large - Stick only for desktop

Usable on: Section CSS Classes field

The following helper class are deprecated, please refer to the new corresponding helper class

Deprecated	Working Version	Note
disable-slider-for-large	disable-carousel-for-large
slider-center-mode	carousel-center-mode
show-slider-dots	show-carousel-dots
hide-slider-arrows	hide-carousel-arrows
slider-adaptive-height	carousel-adaptive-height
hic-pricing-table	box-equal-height
box-equal-height	content-equal-height
horizontal	inline-list
field-left	field-medium-6
field-right	field-medium-6