Backgrounds

Color Class Css variable
bg-black var(--black)
bg-pink var(--pink)
bg-orange var(--orange)
bg-yellow var(--yellow)
bg-grey var(--grey)

Colors

Color Css variable
var(--black)
var(--white)
var(--pink)
var(--red)
var(--orange)
var(--yellow)
var(--blue)
var(--purple)
var(--raspberry)
var(--green)

Templates and modules spacings

Use the following css variables to control template and modules spacings: 


<style>

--module-spacing-none: 0;
--module-spacing-xs: 1rem;
--module-spacing-sm: 1.5rem;
--module-spacing-md: 2rem;
--module-spacing-lg: 3rem;
--module-spacing-xl: 3.5rem;

--template-spacing-none: 0;
--template-spacing-xs: clamp(3rem, 2.9411764706vw + 2.1176470588rem, 4rem);
--template-spacing-sm: clamp(4rem, 4.4117647059vw + 2.6764705882rem, 5.5rem);
--template-spacing-md: clamp(5rem, 8.8235294118vw + 2.3529411765rem, 8rem);
--template-spacing-lg: clamp(8rem, 3.6764705882vw + 6.8970588235rem, 9.25rem);
--template-spacing-xl: clamp(9.25rem, 13.2352941176vw + 5.2794117647rem, 13.75rem);

</style>

Classes: 


.{mt|mb|pt|pb}-none
.{mt|mb|pt|pb}-xs
.{mt|mb|pt|pb}-sm
.{mt|mb|pt|pb}-md
.{mt|mb|pt|pb}-lg
.{mt|mb|pt|pb}-xl

Template Free form options

.has-borders   [Example]

.is-style-contained   [Example]

Columns options

.is-card   [Example]

.has-horz-paddings   [Example]

Typography

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto consectetur cumque deleniti dolorem explicabo facere hic inventore libero maxime, numquam pariatur porro repellendus saepe tempore vel voluptatem voluptatibus, voluptatum!

Utility classes

Spacings

Value Css variable Classes
0px / 0rem var(--spacing-0)
 mt-0 | mb-0 | pt-0 | pb-0
4px / 0.25rem var(--spacing-1)
 mt-1 | mb-1 | pt-1 | pb-1
8px / 0.5rem var(--spacing-2)
 mt-2 | mb-2 | pt-2 | pb-2
12px / 0.75rem var(--spacing-3)
 mt-3 | mb-3 | pt-3 | pb-3
16px / 1rem var(--spacing-4)
 mt-4 | mb-4 | pt-4 | pb-4
20px / 1.25rem var(--spacing-5)
 mt-5 | mb-5 | pt-5 | pb-5
24px / 1.5rem var(--spacing-6)
 mt-6 | mb-6 | pt-6 | pb-6
28px / 1.75rem var(--spacing-7)
 mt-7 | mb-7 | pt-7 | pb-7
32px / 2rem var(--spacing-8)
 mt-8 | mb-8 | pt-8 | pb-8
36px / 2.25rem var(--spacing-9)
 mt-9 | mb-9 | pt-9 | pb-9
40px / 2.5rem var(--spacing-10)
 mt-10 | mb-10 | pt-10 | pb-10
44px / 2.75rem var(--spacing-11)
 mt-11 | mb-11 | pt-11 | pb-11
48px / 3rem var(--spacing-12)
 mt-12 | mb-12 | pt-12 | pb-12
56px / 3.5rem var(--spacing-14)
 mt-14 | mb-14 | pt-14 | pb-14
64px / 4rem var(--spacing-16)
 mt-16 | mb-16 | pt-16 | pb-16
80px / 5rem var(--spacing-20)
 mt-20 | mb-20 | pt-20 | pb-20
96px / 6rem var(--spacing-24)
 mt-24 | mb-24 | pt-24 | pb-24
112px / 7rem var(--spacing-28)
 mt-28 | mb-28 | pt-28 | pb-28
128px / 8rem var(--spacing-32)
 mt-32 | mb-32 | pt-32 | pb-32
144px / 9rem var(--spacing-36)
 mt-36 | mb-36 | pt-36 | pb-36
160px / 10rem var(--spacing-40)
 mt-40 | mb-40 | pt-40 | pb-40
176px / 11rem var(--spacing-44)
 mt-44 | mb-44 | pt-44 | pb-44
192px / 12rem var(--spacing-48)
 mt-48 | mb-48 | pt-48 | pb-48
208px / 13rem var(--spacing-52)
 mt-52 | mb-52 | pt-52 | pb-52
224px / 14rem var(--spacing-56)
 mt-56 | mb-56 | pt-56 | pb-56
240px / 15rem var(--spacing-60)
 mt-60 | mb-60 | pt-60 | pb-60
256px / 16rem var(--spacing-64)
 mt-64 | mb-64 | pt-64 | pb-64
288px / 18rem var(--spacing-72)
 mt-72 | mb-72 | pt-72 | pb-72
320px / 20rem var(--spacing-80)
 mt-80 | mb-80 | pt-80 | pb-80
384px / 24rem var(--spacing-96)
 mt-96 | mb-96 | pt-96 | pb-96

Horizontal alignment

Class Properties
align-left justify-content: flex-start;
align-right justify-content: flex-end;
align-center justify-content: center;
align-justify justify-content: space-between;
align-spaced justify-content: space-around;
align-self-left justify-self: flex-start;
align-self-right justify-self: flex-end;
align-self-center justify-self: center;
align-self-justify justify-self: space-between;
align-self-spaced justify-self: space-around;

Vertical alignment

Class Properties
align-top align-items: flex-start;
align-bottom align-items: flex-end;
align-middle align-items: center;
align-stretch align-items: stretch;
align-self-top align-self: flex-start;
align-self-bottom align-self: flex-end;
align-self-middle align-self: center;
align-self-stretch align-self: stretch;

Text alignment

Class Properties
text-left text-align: left;
text-right text-align: right;
text-center text-align: center;
text-justify text-align: justify;
text-start text-align: start;
text-end text-align: end;
small-text-left text-align: left; [for small breakpoint]
small-text-right text-align: right; [for small breakpoint]
small-text-center text-align: center; [for small breakpoint]
small-text-justify text-align: justify; [for small breakpoint]
small-text-start text-align: start; [for small breakpoint]
small-text-end text-align: end; [for small breakpoint]
medium-text-left text-align: left; [for medium breakpoint]
medium-text-right text-align: right; [for medium breakpoint]
medium-text-center text-align: center; [for medium breakpoint]
medium-text-justify text-align: justify; [for medium breakpoint]
medium-text-start text-align: start; [for medium breakpoint]
medium-text-end text-align: end; [for medium breakpoint]
large-text-left text-align: left; [for large breakpoint]
large-text-right text-align: right; [for large breakpoint]
large-text-center text-align: center; [for large breakpoint]
large-text-justify text-align: justify; [for large breakpoint]
large-text-start text-align: start; [for large breakpoint]
large-text-end text-align: end; [for large breakpoint]

Visibility classes

Class Properties
hide display: none;
show-for-sr clip: rect(0, 0, 0, 0) !important;position: absolute !important;border: 0 !important;padding: 0 !important;width: 1px !important;height: 1px !important;overflow: hidden !important;
hide-for-small
hide-for-medium
hide-for-large
show-for-small
show-for-medium
show-for-large
hide-for-small-only
hide-for-medium-only
hide-for-large-only
show-for-small-only
show-for-medium-only
show-for-large-only