Verdant Style Guide

Verdant style guide

Containers

Container XLarge

Container Large

Container Medium

Container Small

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

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

This is an H1 header style

This is an H2 header style

This is an H3 header style

This is an H4 header style

This is an H5 header style

This is an h6 header style

Text Size Regular

Text Size Medium

Text Size Large

Text Size XLarge

Text weight Normal

Text weight Medium

Text weight Semibold

Text weight Bold

Label Wrapper

Green Oasis Residence

Santa Monica, CA

2023

Text Label

Testimonials

Text Label Solid

Testimonials

Text Link Solid

Testimonials

Section Text Label

Typography

Text Link

Testimonials

Text Tag

Testimonials

Contact Link

(60)-0123-456-789

Useful classes

Flex Box Horizontal

Flex Box Vertical

Flex Wrap

Text Align Left

Text Align Center

Text Align Right

Hidden

Hidden Tablet

Hidden Landscape

Hidden Portrait

HTML Elements

Tag elements

This is an H1 header

This is an H2 header

This is an H3 header

This is an H4 header

This is an H5 header

This is an h6 header

Ordered 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.

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

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

Item 1
Item 2
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

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

Button Primary

Book a call

Button Secondary

View all case studies

Button Tertiary

Book a call

Button Dark

Book a call

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.

Icons

Icon small

Icon medium

Icon large

Icon Xlarge

Client Feedback

You're in good company

From the first sketch to the final detail, Verdant exceeded every expectation. Our home feels like a sanctuary — sustainable, serene, and uniquely ours.

Elena Morris

Private Homeowner

What impressed me most was their ability to merge clean modern design with eco-conscious thinking. We’ve cut our energy use by 40%, and it looks stunning.

Daniel Cho

Urban Developer

From concept to completion, Verdant made the entire process feel seamless. Their attention to detail, sustainable design approach, and ability to bring our vision to life was truly impressive.

Jame Rutherford

Residential Project

Verdant style guide

Containers