Sections

Sections are large blocks or real estate that

section

parallax

Hero
100vh need custom calc for subtracting header

X

Containers

centered containers

container-800

container-900

container-1000

container-1100

container-1200

container-1300

container-1400

rounded

bg-dark

bg-white

Cards

Cards are great for products, blog articles, image galleries, or dashboards.

Tag

Tag

Tag

Tag

Card Image Title

Category Tag

Card Content Title

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.

Grids

Grid styles are meant to be applied to grid objects and have no gap by default. Gap is meant to be applied to the contained objects via margin and padding styles. Keep in mind that these grids styles should not be modified. To create custom versions of these structures, add a sub style or replicate the style and then customize.

grid-2-colums

grid-3-colums

grid-4-colums

grid-5-colums

grid-6-colums

grid-100-100

grid-100-100-100

grid-100-100-100-100

grid-100-100-25

grid-100-100-50

grid-100-25

grid-25-100

grid-25-100-100

grid-50-100

grid-50-100-100

grid-50-100-50

grid-50-200-50

grid-150-50

Margins

What can I say about the margin styles, they are short cuts to avoid time in the style panel.

Overall Margin

Top Margin

Side Margins

Bottom Margin

margin-5

margin-10

margin-15

margin-20

margin-25

margin-30

margin-50

margin-100

margin-top-5

margin-top-10

margin-top-15

margin-top-20

margin-top-25

margin-top-30

margin-top-50

margin-top-100

margin-sides-10

margin-sides-20

margin-sides-50

margin-sides-100

margin-bottom-5

margin-bottom-10

margin-bottom-15

margin-bottom-20

margin-bottom-25

margin-bottom-30

margin-bottom-50

margin-bottom-100

margin-vertical-5

margin-vertical-10

margin-vertical-20

margin-vertical-50

margin-vertical-100

Padding

The padding styles are like the margin styles, but they know what is really important is on the inside.

Overall Padding

Top Padding

Side Padding

Bottom Padding

padding-5

padding-10

padding-15

padding-20

padding-25

padding-30

padding-50

padding-100

padding-top-5

padding-top-10

padding-top-15

padding-top-20

padding-top-25

padding-top-30

padding-top-50

padding-100

padding-sides-20

padding-sides-10

padding-sides-15

padding-sides-20

padding-sides-25

padding-sides-30

padding-sides-50

padding-sides-100

padding-bottom-5

padding-bottom-10

padding-bottom-15

padding-bottom-20

padding-bottom-25

padding-bottom-30

padding-bottom-50

padding-bottom-100

Formatting

Containers, Alignment, Borders, Relativity (relative, parallax, 100, bullseye), Visibility (hide, mobile-hide)

Text

Alignment

Borders

Links

text-smallest

text-smaller

text-small

text-big

text-bigger

text-biggest

align-left

align-right

align-center

bullseye

indent-20

indent-50

indent-50

mobile-center

border

border-thick

border-bottom

border-bottom-thick

border-left

border-left-thick

border-right

border-right-thick

border-light

Other

Utility functions that help guide elements on the page control visibility and form.

Relativity

Visibility

Flex

Headings

relative

absolute

fixed

sticky

100

hide

mobile-hide

mobile-show

float-left

float-right

clear

desktop-hide
‍

flex

flex

flex

flex-left

flex-left

flex-left

flex-right

flex-right

flex-right

flex-center

flex-center

flex-center

flex-middle

flex-middle

flex-middle

inline

inline

inline

Heading

Heading

Heading

Heading

Heading

Heading