Design Framework

Typography

Headings, body text, and other font text.

H1 Heading huge

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Tagline

Tagline Alt

Tag Alt

Tag Rounded

Tag Outline

Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Large text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Small text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum.

Grid Columns

Headings, body text, and other font text.

Desktop Columns

.f-col-2

.f-col-3

.f-col-4

.f-col-5

.f-col-6

.f-col-1-2

.f-col-2-1

.f-col-1-3

.f-col-3-1

.f-col-2-3

.f-col-3-2

Cell Sizing (Column Span)

.f-col-span-2

.f-col-span-3

.f-col-span-4

.f-col-span-5

.f-col-span-6

Column Gap

.f-col-gap-xs

.f-col-gap-s

.f-col-gap-m

.f-col-gap-l

.f-col-gap-xl

Cell Positioning

Responsive

Spacing

A complete spacing guide. Selectors for padding, margin, and alignment.

padding xl

.f-padding-xl

padding large

.f-padding-l

padding medium

.f-padding-m

padding small

.f-padding-s

padding xs

.f-padding-xs

padding top xl

.f-padding-top-xl
also: padding-top-l...m...s...xs

padding bottom xl

.f-padding-bottom-xl
also: padding-bottom-l...m...s...xs

padding left xl

.f-padding-left-xl
also: padding-left-l...m...s...xs

padding right xl

.f-padding-right-xl
also: padding-right-l...m...s...xs

margin bottom xl

.f-margin-bottom-xl
also: margin-bottom-l...s...m...xs

margin right xl

.f-margin-right-xl
also: margin-right-l...s...m...xs

margin lef xl

.f-margin-left-xl
also: margin-left-l...s...m...xs

.f-left

.f-center

.f-right

.f-top-left

.f-top-center

.f-top-right

.f-middle-left

.f-middle-center

.f-middle-right

.f-bottom-left

.f-bottom-center

.f-bottom-right

.f-full-width

Buttons & Links

Button styles and size variations use for all buttons. Add the classes under each button for different types and styles.

.f-btn-main

.f-btn-main-rounded

.f-btn-main-pill

.f-btn-alt

.f-btn-alt-rounded

.f-btn-alt-pill

.f-btn-outline

.f-btn-outline-light

.f-btn-outline-rounded

Button Pill

.f-btn-outline-pill

Button 1 Button 2

.f-btn-dual

Button Sizes

.f-btn-xs

.f-btn-s

.f-btn-m

.f-btn-l

.f-btn-xl

.f-btn-main & .f-btn-full

Links

Link Sizes

Icons

Button styles and size variations use for all buttons. Add the classes under each button for different types and styles.

Icon Color & Sizes

.f-icon-accent-xs

.f-icon-accent-s

.f-icon-accent-m

.f-icon-accent-l

.f-icon-accent-xl

.f-icon-alt-xs

.f-icon-alt-s

.f-icon-alt-m

.f-icon-alt-l

.f-icon-alt-xl

.f-icon-dark-xs

.f-icon-dark-s

.f-icon-dark-m

.f-icon-dark-l

.f-icon-dark-xl

Elements

Button styles and size variations use for all buttons. Add the classes under each button for different types and styles.

Shadows & Border Radius

Box Shadow

.f-box-shadow

Round Corners

.f-round-corners

Circle

.f-circle

Backgrounds

Light Background

.f-bg-light

Light Alt. Background

.f-bg-light-alt

Dark Background

.f-bg-dark

Dark Alt. Background

.f-bg-dark-alt

Accent Background

.f-bg-accent

Accent Alt. Background

.f-bg-accent-alt

Blurred Background
Glass Morphism

.f-bg-blur-m
use blur sizes of -s, -m, -l, -xl

Images

Normal image

.f-image-muted

.f-image-bw

.f-image-blur

.f-hover-blur

.f-hover-muted

.f-hover-bw

.f-hover-color

.f-tilt-up

.f-tilt-down

Hover effects. Scroll animations. Reload or scroll page to see animations. Animations can be applied to text, images, sections, etc.

Hover

Hover Box Shadow

.f-hover-shadow

Hard Shadow

.f-hover-shadow-hard-accent

Hard Shadow Alt

.f-hover-shadow-hard-alt

Hard Shadow Dark

.f-hover-shadow-hard-dark

Hard Shadow Light

.f-hover-shadow-hard-light

Move Up

.f-hover-move-up

Move Down

.f-hover-move-down

Move Left

.f-hover-move-left

Move Right

.f-hover-move-right

Scale

.f-hover-scale

Scale Up

.f-hover-scale-up

Tilt Up

.f-hover-tilt-up

Tilt Down

.f-hover-tilt-down

Tilt Right

.f-hover-tilt-right

Tilt Left

.f-hover-tilt-left

Scroll Animations

Fade Up Fast

.f-anim-fadeup-fast

Fade Up Medium

.f-anim-fadeup-medium

Fade Up Slow

.f-anim-fadeup-slow

Fade Down Fast

.f-anim-fadedown-fast

Fade Down Medium

.f-anim-fadedown-medium

Fade Down Slow

.f-anim-fadedown-slow

Fade Right Fast

.f-anim-faderight-fast

Fade Right Medium

.f-anim-faderight-medium

Fade Right Slow

.f-anim-faderight-slow

Fade Left Fast

.f-anim-fadeleft-fast

Fade Left Medium

.f-anim-fadeleft-medium

Fade Left Slow

.f-anim-fadeleft-slow

More To Come

Heroes

Display elements with different backgrounds.

Hero Small

.f-hero-s

Hero Medium

.f-hero-m

Hero Large

.f-hero-l

Hero XLarge

.f-hero-xl

Hero XLarge

.f-hero-xl