Style Guide
Colors
Variables: ${colors.brand1} ${colors.brand1Dark} ${colors.brand1Darker} ${colors.brand1Darkest} ${colors.brand1Light} ${colors.brand1Lighter} ${colors.brand1Lightest}
Variables: ${colors.brand2} ${colors.brand2Dark} ${colors.brand2Darker} ${colors.brand2Darkest} ${colors.brand2Light} ${colors.brand2Lighter} ${colors.brand2Lightest}
Variables: ${colors.brand3} ${colors.brand3Dark} ${colors.brand3Darker} ${colors.brand3Darkest} ${colors.brand3Light} ${colors.brand3Lighter} ${colors.brand3Lightest}
Variables: ${colors.brand4} ${colors.brand4Dark} ${colors.brand4Darker} ${colors.brand4Darkest} ${colors.brand4Light} ${colors.brand4Lighter} ${colors.brand4Lightest}
Variables: ${colors.brand5} ${colors.brand5Dark} ${colors.brand5Darker} ${colors.brand5Darkest} ${colors.brand5Light} ${colors.brand5Lighter} ${colors.brand5Lightest}
Variables: ${colors.brochureGreen} ${colors.brochureGreenDark} ${colors.brochureGreenDarker} ${colors.brochureGreenDarkest} ${colors.brochureGreenLight} ${colors.brochureGreenLighter} ${colors.brochureGreenLightest}
Variables: ${colors.arrival} ${colors.arrival2} ${colors.arrival2Dark} ${colors.arrival2Darker} ${colors.arrival2Darkest} ${colors.arrival2Light} ${colors.arrival2Lighter} ${colors.arrival2Lightest} ${colors.arrival3} ${colors.arrival3Dark} ${colors.arrival3Darker} ${colors.arrival3Darkest} ${colors.arrival3Light} ${colors.arrival3Lighter} ${colors.arrival3Lightest} ${colors.arrival4} ${colors.arrival4Dark} ${colors.arrival4Darker} ${colors.arrival4Darkest} ${colors.arrival4Light} ${colors.arrival4Lighter} ${colors.arrival4Lightest} ${colors.arrivalBody} ${colors.arrivalBodyDark} ${colors.arrivalBodyDarker} ${colors.arrivalBodyDarkest} ${colors.arrivalBodyLight} ${colors.arrivalBodyLighter} ${colors.arrivalBodyLightest} ${colors.arrivalDark} ${colors.arrivalDarker} ${colors.arrivalDarkest} ${colors.arrivalLight} ${colors.arrivalLighter} ${colors.arrivalLightest}
Variables: ${colors.arrival2} ${colors.arrival2Dark} ${colors.arrival2Darker} ${colors.arrival2Darkest} ${colors.arrival2Light} ${colors.arrival2Lighter} ${colors.arrival2Lightest}
Variables: ${colors.arrival3} ${colors.arrival3Dark} ${colors.arrival3Darker} ${colors.arrival3Darkest} ${colors.arrival3Light} ${colors.arrival3Lighter} ${colors.arrival3Lightest}
Variables: ${colors.arrival4} ${colors.arrival4Dark} ${colors.arrival4Darker} ${colors.arrival4Darkest} ${colors.arrival4Light} ${colors.arrival4Lighter} ${colors.arrival4Lightest}
Variables: ${colors.arrivalBody} ${colors.arrivalBodyDark} ${colors.arrivalBodyDarker} ${colors.arrivalBodyDarkest} ${colors.arrivalBodyLight} ${colors.arrivalBodyLighter} ${colors.arrivalBodyLightest}
Variables: ${colors.destination} ${colors.destinationDark} ${colors.destinationDarker} ${colors.destinationDarkest} ${colors.destinationLight} ${colors.destinationLighter} ${colors.destinationLightest} ${colors.destinationOrange} ${colors.destinationOrangeDark} ${colors.destinationOrangeDarker} ${colors.destinationOrangeDarkest} ${colors.destinationOrangeLight} ${colors.destinationOrangeLighter} ${colors.destinationOrangeLightest}
Variables: ${colors.destinationOrange} ${colors.destinationOrangeDark} ${colors.destinationOrangeDarker} ${colors.destinationOrangeDarkest} ${colors.destinationOrangeLight} ${colors.destinationOrangeLighter} ${colors.destinationOrangeLightest}
Variables: ${colors.silverThorne} ${colors.silverThorneDark} ${colors.silverThorneDarker} ${colors.silverThorneDarkest} ${colors.silverThorneLight} ${colors.silverThorneLighter} ${colors.silverThorneLightest}
Variables: ${colors.arbor} ${colors.arbor2} ${colors.arbor2Dark} ${colors.arbor2Darker} ${colors.arbor2Darkest} ${colors.arbor2Light} ${colors.arbor2Lighter} ${colors.arbor2Lightest} ${colors.arbor3} ${colors.arbor3Dark} ${colors.arbor3Darker} ${colors.arbor3Darkest} ${colors.arbor3Light} ${colors.arbor3Lighter} ${colors.arbor3Lightest} ${colors.arborDark} ${colors.arborDarker} ${colors.arborDarkest} ${colors.arborLight} ${colors.arborLighter} ${colors.arborLightest} ${colors.arborNavy} ${colors.arborNavyDark} ${colors.arborNavyDarker} ${colors.arborNavyDarkest} ${colors.arborNavyLight} ${colors.arborNavyLighter} ${colors.arborNavyLightest}
Variables: ${colors.arbor2} ${colors.arbor2Dark} ${colors.arbor2Darker} ${colors.arbor2Darkest} ${colors.arbor2Light} ${colors.arbor2Lighter} ${colors.arbor2Lightest}
Variables: ${colors.arbor3} ${colors.arbor3Dark} ${colors.arbor3Darker} ${colors.arbor3Darkest} ${colors.arbor3Light} ${colors.arbor3Lighter} ${colors.arbor3Lightest}
Variables: ${colors.arborNavy} ${colors.arborNavyDark} ${colors.arborNavyDarker} ${colors.arborNavyDarkest} ${colors.arborNavyLight} ${colors.arborNavyLighter} ${colors.arborNavyLightest}
Variables: ${colors.black} ${colors.blackDark} ${colors.blackDarker} ${colors.blackDarkest} ${colors.blackLight} ${colors.blackLighter} ${colors.blackLightest}
Variables: ${colors.neutral} ${colors.neutralDark} ${colors.neutralDarker} ${colors.neutralDarkest} ${colors.neutralLight} ${colors.neutralLighter} ${colors.neutralLightest}
Variables: ${colors.white} ${colors.whiteDark} ${colors.whiteDarker} ${colors.whiteDarkest} ${colors.whiteLight} ${colors.whiteLighter} ${colors.whiteLightest}
Variables: ${colors.body} ${colors.bodyDark} ${colors.bodyDarker} ${colors.bodyDarkest} ${colors.bodyLight} ${colors.bodyLighter} ${colors.bodyLightest}
Variables: ${colors.border} ${colors.borderDark} ${colors.borderDarker} ${colors.borderDarkest} ${colors.borderLight} ${colors.borderLighter} ${colors.borderLightest}
Variables: ${colors.lines} ${colors.linesDark} ${colors.linesDarker} ${colors.linesDarkest} ${colors.linesLight} ${colors.linesLighter} ${colors.linesLightest}
Variables: ${colors.error} ${colors.errorDark} ${colors.errorDarker} ${colors.errorDarkest} ${colors.errorLight} ${colors.errorLighter} ${colors.errorLightest}
Typography
Sans Serif
Value: Montserrat, sans-serif
Variable: ${typography.SansSerif}
Helper Class: className="text-sans-serif"
Serif
Value: Montserrat, serif
Variable: ${typography.Serif}
Helper Class: className="text-serif"
Condensed
Value: Montserrat, sans-serif
Variable: ${typography.Condensed}
Helper Class: className="text-condensed"
Display
Value: Montserrat, serif
Variable: ${typography.Display}
Helper Class: className="text-display"
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec.
Buttons
className="btn"
className="btn btn-brand1"
className="btn btn-brand2"
className="btn btn-brand3"
className="btn btn-brand4"
className="btn btn-hollow"
className="btn btn-hollow-white"
className="btn btn-hollow-brand1"
className="btn btn-hollow-brand2"
className="btn btn-hollow-brand3"
className="btn btn-hollow-brand4"
Icon Buttons
className="btn btn-arrow-white"
className="btn btn-hollow btn-arrow-black"
className="btn btn-phone-white"
className="btn btn-hollow btn-phone-black"
className="btn btn-chat-white"
className="btn btn-hollow btn-chat-black"
AreasSection
BlogDetail
BlogInsideHeader
BlogList
BlogpostsBanner
ButtonSet
ButtonSetBanner
CTABanner
CareerForm
Career Form
ContactBanner
ContactForm
Contact Form
ContactFormShort
EmbedSection
Embed Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in.
FeaturedProducts
Featured Communities
HomeContent
Welcome
to Aspen Homes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu euismod nibh, vitae malesuada libero. In tortor nisl, consequat eu posuere sit amet, consequat ut dolor. Donec efficitur magna eget cursus malesuada. Nunc sollicitudin eget purus vel dapibus. Nam nulla tellus, dapibus vitae finibus eget, rhoncus quis dolor. Suspendisse interdum eu enim at dignissim. Etiam egestas ante ex, porttitor maximus diam sollicitudin gravida.
HomePageHeroImage
InsideHeader
About Us
InsideMenu
InteractiveHome
Interactive Home
PageAccordionSection
Frequently Asked Questions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec ipsum et, convallis sollicitudin dui. Proin dictum quam a semper malesuada. Etiam porta sit amet risus quis porta. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec ipsum et, convallis sollicitudin dui. Proin dictum quam a semper malesuada. Etiam porta sit amet risus quis porta. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec ipsum et, convallis sollicitudin dui. Proin dictum quam a semper malesuada. Etiam porta sit amet risus quis porta. Nulla facilisi.
PageIntroBanner
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent.
PageSections
About Our Company
Lorem ipsum dolor sit amet consectetur adipiscin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec ipsum et, convallis sollicitudin dui. Proin dictum quam a semper malesuada. Etiam porta sit amet risus quis porta. Nulla facilisi.
Ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit amet sed mauris. Praesent molestie vestibulum erat ac rhoncus. Aenean nunc risus, accumsan nec ipsum et, convallis sollicitudin dui. Proin dictum quam a semper malesuada. Etiam porta sit amet risus quis porta. Nulla facilisi.
PageTestimonials
Testimonials
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget.
Christopher Williams
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget.
Linda Anderson | Aspen Village
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget.
Mary Miller
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget.
Birch Meadows
PageTextSection
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit auctor dolor. Nulla viverra, nibh quis ultrices malesuada, ligula ipsum vulputate diam, aliquam egestas nibh ante vel dui. Sed in tellus interdum eros vulputate placerat sed non enim. Pellentesque eget justo porttitor urna dictum fermentum sit.
PageVideoGallery
PhotoGallery
PhotoGalleryBanner
ProductMap
Where We Build
QuickSearch
Quick Search
RealtorForm
Realtor Inquiry
ReferAFriendForm
Referral Form
Team
The Team
Email
(888) 888-8888
TestimonialBanner
What Our
Homebuyers Are Saying
The quality and little details were big improvements over the other homes we looked at. We weren't just looking at 'right now,' but also how the home will sell in the future. When you think about resale value and compare standard features and upgrades, they were the best!
TourGallery
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit.
VendorRequestForm
Vendor Request
VideoGallery
- Video Title
- Video Title Two