Verdant Style Guide

Verdant style guide

Containers

Containers

Container XLarge
Container Large
Container Medium
Container Small
Grids

Grids

Grid 2 Column
Grid 3 Column
Grid 4 Column
Grid 2-1 Column
Grid 1-2 Column
Max widths

Max Widths

Max Width XSmall
Max Width Small
Max Width Medium
Max Width Large
Max Width XLarge
Spacing

Spacing

Margin

Margin Vertical
Margin Horizontal
Margin Top
Margin Bottom
Margin Left
Margin Right
Margin Huge
Margin XLarge
Margin Large
Margin Medium
Margin Small
Margin XSmall

Padding

Padding 0
Padding Vertical
Padding Horizontal
Padding Top
Padding Bottom
Padding Left
Padding Right
Padding Global
Padding Huge
Padding XLarge
Padding Large
Padding Medium
Padding Small
Padding XSmall
Padding 0
Typography

Typography

H1

This is an H1 header

H2

This is an H2 header

H3

This is an H3 header

H4

This is an H4 header

H5
This is an H5 header
H6
This is an h6 header
Text Size Regular

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.

Text Size Medium

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.

Text Size Large

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.

Text Size XLarge

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.

Text weight Normal

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.

Text weight Medium

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.

Text weight Semibold

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.

Text weight Bold

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.

Label Wrapper
Green Oasis Residence
Santa Monica, CA
2023
Text Label
Testimonials
Text Label Solid
Testimonials
Text Link
Testimonials
Useful classes

Useful classes

Flex Box Horizontal
Flex Box Vertical
Text Align Left
Text Align Left
Text Align Center
Text Align Center
Text Align Right
Text Align Right
Hidden
Hidden Tablet
Hidden MobiLe Landscape
Hidden MobiLe Portrait
HTML Elements

HTML elements

H1

This is an H1 header

H2

This is an H2 header

H3

This is an H3 header

H4

This is an H4 header

H5
This is an H5 header
H6
This is an h6 header
Color

Color

Accent Colours

Accent Color 1
Accent Color 2
Accent Color 3
Accent Color 4

Neutral colours

NeutRAL cOLOR 1
nEUTRAL cOLOR 2
nEUTRAL cOLOR 3
nEUTRAL cOLOR 4
Background Color 1
White
Black
Color

Buttons

Button Primary
Book a consultation
Button Secondary
Explore our work
Button Grey
Explore features
Button Dark
Request a Callback
Images

Images

Image Wrapper
view-luxurious-villa-with-modern-architectural-design-freepik-ai-2
Thumbnail Wrapper
3d-rendering-wooden-house-freepik-ai
Green Oasis Residence
Santa Monica, CA
2023
Icons

Icons

Icon small
Icon medium
Icon large