Typography
HERO - Large Row Background *H1 Atom*
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
h1, .h1
h1 .pp-secondary-title
CONTENT - Services (3 COL) *H2 Atom*
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi. Sed at magna eget mi fermentum dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod interdum erat, sed varius nunc fermentum id.
h2, .h2
h2 .pp-secondary-title
Service Example *H3 Atom*
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
h3, .h3
h3 .pp-secondary-title
H4 - Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
h4, .h4
H5 - Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
h5, .h5
H6 - Heading Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
h6, .h6, .tinycopy
Large Text – x1.25
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
.large-p-text p, .large-p-text
#
Medium Text – x1.125
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
.medium-p-text p, .medium-p-text
#
Text Regular – 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
p
clamp(1rem, 1.5vw, 1.25rem)
Text Tiny – x0.875
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
.small-p-text p, .small-p-text
#
Text Tiny – x0.75
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu euismod arcu, a placerat justo. Donec a nunc sed mi malesuada posuere sed a nisi.
.tiny-p-text p, .tiny-p-text
#
Box/Grids
Box
.single-column-box
.two-column-box
.three-column-box
Box Grid System
(Not just columns can be nested within one another)
(Maybe just horizontal while above is just vertical)
Base 3
.grid-two
.grid-four
.grid-eight
Thirds
.grid-three
.grid-six
UI Elements
Buttons
.fl-button, .fl-button-text
Ex.
.white-button .fl-button {
background-color: white !important;
}
.white-button .fl-button:hover {
background-color: grey !important;
}
.fl-button-text {
color: black !important;
}
Ex.
.link .fl-button {
padding: 0em!important;
background-color: transparent;
border-color: transparent;
}
.white-button .fl-button, .fl-button-text
Ex.
.white-button .fl-button {
background-color: white !important;
}
.white-button .fl-button:hover {
background-color: grey !important;
}
.fl-button-text {
color: black !important;
}
.border-button .fl-button {
background-color: transparent !important;
border: solid 2px white;
}
.border-button .fl-button:hover {
background-color: transparent !important;
border: grey 2px white;
}
.border-button-text {
color: white !important;
}
.border-button-text:hover {
color: grey !important;
}
Forms
"*" indicates required fields
"*" indicates required fields
"*" indicates required fields
"*" indicates required fields
.gfield_checkbox, .gfield_label
.gform-field-label
Accordion
-
Item
Social Icons
Menus
Module Name: PowerPack Off-Canvas Content
.ubermenu-target-text, .menu-item-text, .pp-slide-menu-item-link, .pp-toggle-label
.ubermenu-submenu .ubermenu-target-text, .sub-menu .menu-item-text, .pp-slide-menu-sub-item-link
.uabb-creative-menu-mobile-toggle.hamburger-label
.uabb-offcanvas-text-wrap