Text Styles

Here goes your text ... Select any part of your text to access the formatting toolbar.
Hero
or
.heading-xlrg

I am a heading

H1
or
.heading-lrg

I am a heading

H2
or
.heading-med

I am a heading

H3
or
.heading-sml

I am a heading

H4
or
.heading-xsml

I am a heading

H5
or
.heading-xxsml
I am a heading
H6
or
.heading-xxxsml
I am a heading
.section-heading

I am a heading

.text-lrg
Here goes your text ... Select any part of your text to access the formatting toolbar.
Basic Text
or
.text-med
Here goes your text ... Select any part of your text to access the formatting toolbar.
.text-sml
Here goes your text ... Select any part of your text to access the formatting toolbar.
.basic-tag
New!

Spacing Variables

Here goes your text ... Select any part of your text to access the formatting toolbar.
var(--spacing-xsml)
var(--spacing-sml)
var(--spacing-med)
var(--spacing-lrg)
var(--spacing-xlrg)
var(--spacing-xlrg)

Button Styles

Here goes your text ... Select any part of your text to access the formatting toolbar.
Default
I am a button
Default
Small
I am a button
Primary
I am a button
Primary
Small
I am a button
Secondary
I am a button
Secondary
Small
I am a button
Light
I am a button
Light
Small
I am a button
Dark
I am a button
Dark
Small
I am a button
Text Link
Apply now
Dark
Small
I am a button
Muted
I am a button
Muted
Small
I am a button

Border Styles

Here goes your text ... Select any part of your text to access the formatting toolbar.
var(--border-radius-sml)
var(--border-radius-med)
var(--border-radius-lrg)
var(--border-radius-xlrg)

Layouts

Here goes your text ... Select any part of your text to access the formatting toolbar.
.grid-2
.grid-3
.grid-1-2
.grid-1-3
.grid-2-1
.grid-3-1
.grid-1-2-1
.grid-1-3-1
.grid-4
.grid-5
.grid-6
.grid-auto

Ratios

Here goes your text ... Select any part of your text to access the formatting toolbar.
.ratio-16-9
.ratio-3-2
.ratio-4-3
.ratio-1-1
.ratio-3-4
.ratio-2-3

Rich Text Styles

Here goes your text ... Select any part of your text to access the formatting toolbar.

This is a Rich Text Element

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.

Nulla quis lorem ut libero malesuada feugiat.

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.

Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada.

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.

Proin eget tortor risus.

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat.

  • Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
  • Nulla porttitor accumsan tincidunt.
  • Quisque velit nisi, pretium ut lacinia in, elementum id enim.
  1. Proin eget tortor risus.
  2. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
  3. Nulla porttitor accumsan tincidunt.

 

Box Styles

Here goes your text ... Select any part of your text to access the formatting toolbar.
.box-xsml
.box-sml
.box-med
.box-lrg
.box-xlrg