Layout

Headers & Text

Lorem ipsum dolor sit amet

H1

Lorem ipsum dolor sit amet

H2

Lorem ipsum dolor sit amet

H3

Lorem ipsum dolor sit amet

H4
Lorem ipsum dolor sit amet
H5
Lorem ipsum dolor sit amet
H6

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.

Suspendisse cursus dolor nec libero placerat, et consectetur est aliquet. Etiam lacus nisl, sodales a convallis quis, placerat ac neque. Aenean tempus varius sem vitae dapibus.

Default - Body / Paragraphs / Text

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.

Suspendisse cursus dolor nec libero placerat, et consectetur est aliquet. Etiam lacus nisl, sodales a convallis quis, placerat ac neque. Aenean tempus varius sem vitae dapibus.

Large - Body / Paragraphs / Text
Lorem ipsum dolor sit amet
Block Quote
This is some text inside of a div block.
Label
Lorem ipsum
Text Link
  1. Lorem ipsum
  2. Dolor sit
  3. Amet consectetur
ordered List & List items
  • Lorem ipsum
  • Dolor sit
  • Amet consectetur
Unordered List & List items
Image
Blog Post Headers

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

H1
Buttons & Other CTA's
Primary Button
Button - DEFAULT (NOT TO BE USED)
Primary Button
Button - Full Width Button
Primary Button
Primary Button
Primary Button
Secondary Button
Primary Button
Tertiary Button
Primary Button
Primary Button - Inverse
Primary Button
Secondary Button - Inverse
Primary Button
Tertiary Button - Inverse
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Field
Form Field
Colors

Brand Primary

This is the default text color inside of this background color
Martinique
This is the default text color inside of this background color
Pale Sky
This is the default text color inside of this background color
Cloud

Brand Secondary

This is the default text color inside of this background color
Persimmon
This is the default text color inside of this background color
Leaf
This is the default text color inside of this background color
Dogwood
This is the default text color inside of this background color
Sky Light
Layout / Structure

Columns

NOTE: Each column should have an inner "wrapper-div" with a class of .section-inner-wrap to inherit the proper spacing.

1-Column
Some Content Goes Here
2-Column
Column 1
Column 2
3-Column
Column 1
Column 2
Column 3

Stacking

Stack columns:
No stack (Doesn't stack at any breakpoint)
Column 1
Column 2
On tablet & mobile, .stacked-tablet-mobile
Column 1
Column 2
Only on mobile, .stacked-mobile
Column 1
Column 2
2 - Column Layout

Column Order

Reverse the order in which columns appear at different breakpoints. This may be useful when you want the elements on the page to be a specific order on desktop but be displayed in reverse order on mobile.

Reverse display order:
On all breakpoints, .reverse
1
2
Only on desktop, .reverse-desktop
1
2
Only on tablet, .reverse-tablet
1
2
Only on mobile, .reverse-mobile
1
2
On desktop & tablet, .reverse-desktop-tablet
1
2
On tablet & mobile, .reverse-tablet-mobile
1
2
3 - Column Layout

Element Visibility

Set breakpoint visibility

Hide element on a specific breakpoints
.hidden-desktop
CONTENT
.hidden-tablet
CONTENT
.hidden-mobile
CONTENT
Hide element on multiple breakpoints
.hidden-desktop-tablet
CONTENT
.hidden-tablet-mobile
CONTENT
Element visibility

Content Width

Set width of content wrappers.

Set content width
.w-100
CONTENT
.w-80
CONTENT
.w-75
CONTENT
.w-50
CONTENT
.w-25
CONTENT
.w-20
CONTENT
Element visibility

Complex Components & Snippets

Address Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Address Input
Get a Free Valuation

Our valuations are 40% more accurate than other leading estimates.

Get a Free Valuation

Our valuations are 40% more accurate than other leading estimates.

Sorry, we weren't able to find that address. Please email support@orchard.com for help.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.