Style Guide

Modify the elements that already exist to adapt them to your own design.
All classes started with u-... are utilities set in one of the embeds at GLOBAL_stylesComponent.
For further information read The Hash Docs.

Typography

Core Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

H5 Headings
Element
H6 Headings
Element
heading-1

On design 99px - D5.5 / T4.2 / L3.8 / P3.2 rem

Class
heading-2

On design 60px - D3.75 / T3.2 / L2.8 / P - rem

Class
heading-3

On design 52px - D3.25 / T2.8 / L2.6 / P - rem

Class
heading-4

On design 40px - D2.5 / T2.4 / L- / P - rem

Class
heading-5

On design 32px - D2 / T- / L- / P - rem

Class
heading-6

On design 24px - D1.5 / T -/ L - / P - rem

Class

Additional Headings

heading-display-1

with Custom Clamp CSS

Class

Body

paragraph-lg

On design 27px/24px

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

paragraph-md

On design 20px/30px

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

paragraph

/ On design 19px

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

paragraph-sm

/ On design 16px

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

text-meta
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Line Clamp

The next custom atributes are set at the ... embed as root variables.

u-line-clamp="1"

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.

u-line-clamp="2"

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.

u-line-clamp="3"

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.

u-line-clamp="4"

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.

Color

This colors are set in the color embed as root variables.

Background

Dark 1
u-bg-dark-1
Dark 2
u-bg-dark-2
Light Gray
u-bg-light-1
Light Gray
u-bg-light-2
Accent 1
u-bg-accent-1
Accent 2
u-bg-accent-2

Text

Aa
Dark 1
u-text-dark-1
Aa
Dark 2
u-text-dark-2
Aa
Light Gray
u-text-light-1
Aa
White
u-text-light-2
Aa
Primary
u-text-accent-1
Aa
Primary
u-text-accent-2

Components

Buttons

Button
Default
btn
Button
Secondary
btn
is-secondary
Text
Text Link
All Links

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Cards

Default

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

Layout

Section

section

Container

container

Grid

Default gap is set in the spacing embed

grid-2-col
grid-4-col
grid-6-col
grid-12-col
grid-12-col--nogap
grid-custom-1

Wrappers

title-wrapper

//

Heading

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.

title-wrapper
cc-centered

//

Heading

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.

content-wrapper

//

Heading

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.

btn-wrapper

//

Button 1Button 2
hero-wrapper-1

//

F3 Framework Base

Button TextButton Text
Modal Trigger

Spacers

Global Top and Bottom padding

spacer-section-1

// On design Desktop: 140px

spacer-section-2

// On design Desktop: 64x

spacer-section-3

// On design Desktop: 64px

spacer-hero-1

// On design Desktop: 96px

spacer-content-1

// On design Desktop: 34px

spacer-content-2

// On design Desktop: 16px

Utilities

Max Widths

u-max-w-25
u-max-w-26
u-max-w-27
u-max-w-28
u-max-w-30
u-max-w-31
u-max-w-32
u-max-w-33
u-max-w-34
u-max-w-35
u-max-w-36
u-max-w-37
u-max-w-38
u-max-w-39
u-max-w-40
u-max-w-41
u-max-w-42
u-max-w-43
u-max-w-44
u-max-w-45
u-max-w-46
u-max-w-47
u-max-w-48
u-max-w-49
u-max-w-50
u-max-w-full

Modifiers

u-nomax-md
max-width: none;
On tablet
u-nomax-sm
max-width: none;
On mobile landscape

Layouth

Size

u-w-100
width: 100%;
u-h-100
height: 100%;

Margin

Full
u-m-0
margin: 0px !important;
Left & Right
u-mlr-auto
margin-left:  auto;
margin-right: auto;
Bottom
u-mb-0
margin-bottom: 0px;
Top
u-mt-0
margin-top: 0px;
u-mt-auto
margin-top: auto;

Padding

Top
u-pt-0
padding-top: 0;
Botton
u-pb-0
padding-bottom: 0;
Full
u-p-0
padding: 0;

Overflow

u-overflow-hidden
overflow: hidden;

Pointer Events

u-clickable
pointe-events: auto;
u-no-clickable
pointe-events: none;

Display + position

u-d-none
display: none;
u-position-relative
position: relative;
u-z-index-1
z-index: 1;

Rounded Corners

The next custom classe are set at the ... embed as class naming variables.

rounded-0
rounded-1
rounded-2
rounded-100

Full Class Utilities

img-cover
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;
link-cover
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
img-ratio-1
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;
position: relative;
overflow: hidden;
aspect-ratio: 1/1;
img-ratio-2
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 105%;
object-fit: cover;
position: relative;
overflow: hidden;
aspect-ratio: 16/9;