Earthbound

Style Guide

This framework contains the most commonly used styles and components to build out a website.

Typography

Customize text elements with fonts, text sizes, etc.

H1 Heading

H1 Element

H2 Heading

H2 Element

H3 Heading

H3 Element

H4 Heading

H4 Element

H5 Heading
H5 Element
H6 Heading
H6 Element
h1

H1 Class

h2

H2 Class

h3

H3 Class

h4

H4 Class

h5
H5 Class
h6
H6 Class
All Paragraphs

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.

paragraph-1.10

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.

paragraph-0.90

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.

All Block Quotes
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.
All Unordered Lists
  • Example List Item 1
  • Example List Item 2
  • Example List Item 3
All Links

Rich Text

Create and format long-form text content with bolds, italics and lists.

This is a Heading

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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.

Ordered list

  1. Example List Item 1
  2. Example List Item 2
  3. Example List Item 3

Unordered list

  • Example List Item A
  • Example List Item B
  • Example List Item C

Text link

Colors

Colors are based on variables and should be changed in the Variables menu accessed by pressing the V key.

u-bg-base
u-bg-darkgray
u-bg-midgray
u-bg-lightgray
u-bg-white
u-bg-primary
u-text-base
Aa
u-text-darkgray
Aa
u-text-midgray
Aa
u-text-lightgray
Aa
u-text-white
Aa
u-text-primary
Aa

Buttons

Style clickable elements that trigger actions.

btn
Primary Button
btn
cc-secondary
Secondary Button
btn
cc-disabled
Disabled Button
btn
cc-small
btn
cc-small
cc-secondary

Columns

Layout components for arranging content side by side.

Desktop

col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12

Tablet

col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12

Mobile (Landscape)

col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12

Mobile (Portrait)

col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12

Align columns

row
row-align-center
row
row-align-end

Justify columns

row
row-justify-center
row
row-justify-end
row
row-justify-around
row
row-justify-between

Card

Custom component for structured information.

card
card-body
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Utilities

Pre-styled utility classes for quick styling.

u-mt-auto
margin-top: auto;
u-mb-0
margin-bottom: 0;
u-text-center
text-align: center;
u-text-right
text-align: right;
u-overflow-visible
overflow: visible;
u-overflow-hidden
overflow: hidden;
u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-p-relative
position: relative;
u-text-balance
text-wrap: balance;
u-text-pretty
text-wrap: pretty;
u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height 100vh;
u-sr-only
Multiple properties
u-z-index-1
Multiple properties
u-img-cover
Multiple properties
u-link-cover
Multiple properties
I am accessible!

Spacers

Adds space between elements and components.

spacer
spacer
cc-32
spacer
cc-48
spacer
cc-64
spacer
cc-80
spacer
cc-96
spacer
cc-128

Text Boxes

Text boxes with a set maximum width.

text-box
text-box
cc-500
text-box
cc-600
text-box
cc-700
text-box
cc-800

Icons

Icons used in this framework are from Lucide.dev.
More info in Instructions.

embed-icon
embed-icon
cc-32
embed-icon
cc-48

Forms

Style and collect information from users with forms.

By clicking the button the form will be submitted.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Tabs

Component for switching between content sections.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5