Classes

Classes naming convention

Classes are prefixed as to set a hint about class type and use. You can find below a list of all prefixes used in class names.

  • NAV : navigation - used to group navigation elements.
  • LT : layout - used to set pages elements layout such as container and grids.
  • WR : wrapper - used to group content inside layout elements.
  • SWR : sub-wrapper - used to group content inside wrappers.
  • CL : collection list - used to style custom collection list layout when existing utility classes are not enough.
  • CLI : collection list item - used to style collection items.
  • uc : utility classes - combo classes used for various styles adjustments such as spacing, aligment, images rendering...

Utility classes

Visibility & layers

Button
.uc-hide
Button
.uc-hide-tablet
Button
.uc-hide-mobile
Button
.uc-show-tablet
Button
.uc-show-mobile
Button
.overflow-x-hidden
Button
.uc-z-index-negative-1
Button
.uc-z-index-1
Button
.uc-z-index-10
Button
.uc-z-index-10
Button
.uc-z-index-10
Button
.uc-z-index-10
Button
.uc-z-index-10
Button
.uc-z-index-10
Button
.uc-z-index-10

Spacing

Button
.uc-mt-4
Button
.uc-mt-10
Button
.uc-mt-20
Button
.uc-mt-40
Button
.uc-mt-60
Button
.uc-mt-80
Button
.uc-mt-120
Button
.uc-mt-160
Button
.uc-mb-4
Button
.uc-mb-10
Button
.uc-mb-20
Button
.uc-mb-40
Button
.uc-mb-60
Button
.uc-mb-80
Button
.uc-mb-120
Button
.uc-mb-160
Button
.uc-ml-4
Button
.uc-ml-10
Button
.uc-ml-20
Button
.uc-ml-40
Button
.uc-ml-60
Button
.uc-ml-80
Button
.uc-mr-4
Button
.uc-mr-10
Button
.uc-mr-20
Button
.uc-mr-40
Button
.uc-mr-60
Button
.uc-mr-60
Button
.uc-no-margin
Button
.uc-pd-10
Button
.uc-pd-20
Button
.uc-pd-40
Button
.uc-pd-40
Button
.uc-full-width
Button
.uc-full-height
Button
.uc-full

Alignment

Button
.uc-align-lft
Button
.uc-align-center
Button
.uc-align-rgt
Button
.uc-justify-btm
Button
.uc-justify-top
Button
.uc-justify-center
Button
.uc-flex-h
Button
.uc-flex-v
Button
.uc-flex-lft
Button
.uc-flex-rgt

Border width

Button
.uc-border
Button
.border-bottom
Button
.uc-bw-1
Button
.uc-bw-2
Button
.uc-bw-3
Button
.uc-bw-4
Button
.uc-bw-8
Button
.uc-bc-prim-1
Button
.uc-bc-prim-2
Button
.uc-bc-prim-3

Border color

Button
.uc-bc-prim-1
Button
.uc-bc-prim-2
Button
.uc-bc-prim-3
Button
.no-bg

Border radius

Button
.uc-br-1
Button
.uc-br-2
Button
.uc-br-3
Button
.uc-br-5
Button
.uc-br-10
Button
.uc-br-20
Button
.uc-br-round

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.trunc-text .tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.trunc-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.trunc-text .large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.text-align-rgt

Image boxes

.image-frame
.image-frame .zoom-in
.image-frame .zoom-in .spin-10
.ratio-box .1:1
.ratio-box .4:3
.ratio-box .3:2
.ratio-box .8:5
.ratio-box .16:9
.ratio-box .21:9
.layer .bg-filter
.image-parent-cover
Button
.clickable-off