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

Modifiers

2 Column Tablet
2 Column Landscape
1 Column Tablet
1 Column Landscape
1 Column Portrait
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 style

H2

This is an H2 header style

H3

This is an H3 header style

H4

This is an H4 header style

H5
This is an H5 header style
H6
This is an h6 header style
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 Solid
Testimonials
Testimonials
Section Text Label
Typography
Text Link
Testimonials
Useful classes

Useful classes

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

Tag 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
Ordered List
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
Unordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Blockquote
This is some text in a block
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Paragraph

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.

Text Link
Text Link
Button Text Primary
Button Primary
Button Text Secondary
Button Secondary
Button Text Dark
Button Text
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

This is a block quote
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Modern-domestic-room-with-elegant-wooden-chair-generated-by-ai-freepik
This is a image caption
Color

Color

Accent Colours

Accent Color 1A
Accent Color 1b
Accent Color 1c
Accent Color 1D
Accent Color 2A
Accent Color 2b
Accent Color 2c
Accent Color 2D

Neutral colours

NeutRAL cOLOR 1A
Neutral Color 1B
Neutral Color 1C
Neutral Color 2a
Neutral Color 2b
Neutral Color 2c
Black
White
Buttons

Buttons

Button Primary
Book a call
Book a call
Button Secondary
View all case studies
View all case studies
Button Tertiary
Book a call
Book a call
Button Dark
Book a call
Book a call
Images

Images

Image Wrapper
man-installing-solar-panels-roof-freepik
Thumbnail Wrapper
Twilight Serenity at Coastal Modern Home Freepik AI
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Icons

Icons

Icon small
Icon medium
Icon large
Icon Xlarge