Homepage style guide

Jump to:

Homepage hero (mmt, pattern-hero)

A hotel that's "just right"

Book a stay with us

View homepage hero specs

Container

General
width: 100%
background-color: #FFFFFF

LVP, MVP
height: 300px

SVP, XSVP
height: 200px
Headline 1 (main style)(h1)

General
color: #ff3a1e
font-family: F37 Ginger, Bold

LVP, MVP
font-size: 54px
line-height: 67.5

SVP, XSVP
font-size: 36px
line-height: 48px
Subhead (main style)(h1.small)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
padding-top: 10px

LVP, MVP
font-size: 38px
line-height: 47.25px

SVP, XSVP
font-size: 28px
line-height: 35px

Reservation module (Book now tab)

Book now
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Holiday Inn
Holiday Inn Miami Beach-Oceanfront

Miami Beach, FL, United States
Staybridge Suites
Staybridge Suites Atlanta - Midtown

Atlanta, GA, United States
InterContinental Hotels
InterContinental Hotels Toronto Centre

Toronto, ON, Canada
Holiday Inn & Suites
Holiday Inn & Suites Atlanta Airport-North

Atlanta, GA, United States
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Need to make changes to your reservation? You've come to the right place!

Already an IHG® Rewards Club Member? Sign in to view reservations.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Manage reservations
Manage reservations
Need to make changes to your reservation? You've come to the right place!

Already an IHG® Rewards Club Member? Sign in to view reservations.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

View reservation module (Book now) specs

Container

All viewports
padding-top-bottom: 30px
background-color: #68d2df

Form label (i.e. Destination)

LVP, MVP, SVP
font-family: F37 Ginger, Regular
font-size: 18px
line-height: 26px
color: #3d3d3d

XSVP
font-size: 16px
line-height: 23px
Search button (main style)(a.primary)

All viewports
color: #FFF
background-color: #ff3a1e
padding-top-bottom: 15px
padding-left-right: 30px
margin-top: 10px
font-family: F37 Ginger, Bold
font-size: 18px
line-height: 22px
border-radius: 5px

Hover / focused
background-color: #e42c0f
Forms (i.e. 1/23/2018)

General
border-radius: 5px
background-color: #FFFFFF
padding-top-bottom: 8px

LVP, MVP, SVP
font-size: 18px

XSVP
font-size: 16px
Mobile "Manage reservations"

General
background-color: #f7f7f7
color: #3d3d3d
height: 60px (or, however you can accomplish this with padding)
XSVP "Book now" button

General
background-color: #ff3a1e
padding-top-bottom: 12px
color: #FFF
font-family: F37 Ginger

"Book now"
font-weight: Bold

Price
font-weight: Regular

Hover / focused
background-color: #e42c0f
Disclaimer (*Required field)

All viewports
font-family: F37 Ginger, Regular
font-size: 14px
color: #3d3d3d

LVP, MVP
text-align: center

SVP, XSVP
text-align: left
Tab headers (i.e. Book now)

LVP, MVP, SVP
font-family: F37 Ginger, Bold
font-size: 18px
color: #3d3d3d

XSVP
font-size: 16px

Hover / focused (except for active tab)
color: #e42c0f
More options

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline

Downwards Chevron
font-family: fontawesome
chevron-down Unicode: f078

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Hover / focused
color: #e42c0f
More options hidden fields container

All viewports
padding-top: 30px
border-top: 2px, solid, #FFF

Reservation module (Recently viewed tab)

Book now
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Holiday Inn
Holiday Inn Miami Beach-Oceanfront

Miami Beach, FL, United States
Staybridge Suites
Staybridge Suites Atlanta - Midtown

Atlanta, GA, United States
InterContinental Hotels
InterContinental Hotels Toronto Centre

Toronto, ON, Canada
Holiday Inn & Suites
Holiday Inn & Suites Atlanta Airport-North

Atlanta, GA, United States
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Need to make changes to your reservation? You've come to the right place!

Already an IHG® Rewards Club Member? Sign in to view reservations.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Manage reservations
Manage reservations
Need to make changes to your reservation? You've come to the right place!

Already an IHG® Rewards Club Member? Sign in to view reservations.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

View reservation module (Recently viewed) specs

Container

All viewports
padding-top-bottom: 30px
background-color: #68d2df

Tab pane (information container)

All viewports
padding-top-bottom: 30px
background-color: #68d2df
Headlines (i.e. Holiday Inn)

All viewports
color: #3d3d3d
font-family: F37 Ginger, bold
font-size: 14px
line-height: 18px
font-decoration: underlined

Hover / focused
color: #e42c0f
X Icon

All viewports
color: #3d3d3d
font-family: fontawesome
font-size: 18px
line-height: 26px

Hover / focused
color: #e42c0f

I've accomplished this placement with a right margin of 20px on the image container, and by making the icon float: right. This is by no means the final solution; please solve for this however you feel is best
Hotel names & cities

All viewports
font-family: F37 Ginger, Regular
font-size: 14px
line-height: 18px
color: #3d3d3d
Reviews (dots)

All viewports
color: #ff3a1e
font-family: fontawesome
full circle: f111 circle (full)
half circle: f042 adjust
empty circle: f111 circle(regular)
font-size: 14px
line-height: 18px

Note: these fontawesome values may not line up with how IHG is treating circles for these Bazaarvoice calls. Please display the circles in whatever way we as a company are moving forward

Reservation module (Manage reservations)

Book now
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Holiday Inn
Holiday Inn Miami Beach-Oceanfront

Miami Beach, FL, United States
Staybridge Suites
Staybridge Suites Atlanta - Midtown

Atlanta, GA, United States
InterContinental Hotels
InterContinental Hotels Toronto Centre

Toronto, ON, Canada
Holiday Inn & Suites
Holiday Inn & Suites Atlanta Airport-North

Atlanta, GA, United States
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Need to make changes to your reservation? You've come to the right place!

Already an IHG® Rewards Club Member? Sign in to view reservations.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Manage reservations
Manage reservations
Need to make changes to your reservation? You've come to the right place!

Already an IHG® Rewards Club Member? Sign in to view reservations.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

View reservation module (Manage reservations) specs

Container

All viewports
padding-top-bottom: 30px

Note that, in Webflow on SVP & XSVP, there are no active tabs if you select "Manage reservations" and then scale down from LVP or MVP. This is not intended; on SVP or XSVP, please display book now by default if the browser window is scaled down
Forms (i.e. #12345678)

General
border-radius: 5px
background-color: #FFFFFF
padding-top-bottom: 8px

LVP, MVP, SVP
font-size: 18px

XSVP
font-size: 16px
View button (main style)(a.primary)

All viewports
color: #FFF
background-color: #ff3a1e
padding-top-bottom: 15px
padding-left-right: 30px
margin-top: 10px
font-size: 18px
line-height: 22px
border-radius: 5px

Hover / focused
background-color: #e42c0f
Paragraph / headers (main style)(.p) 

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: left
padding-bottom: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Note that, like on "Book now", the (Required) field descriptor is in-line with the headlines, as opposed to being separated out below the forms

Text link (main style)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Hover / focused
color: #e42c0f

Reservation module - calendar

View reservation module - calendar specs

Please note that all padding, spacing between elements, and so on should not be changed from how they are displayed by default. The specs below are for text and box styling only
Container

All viewports
border: 2px, solid, #68d2df
Month/Year

All viewports
color: #ff3a1e
font-family: F37 Ginger, Bold

LVP, MVP
font-size: 14px
line-height: 18px

SVP, XSVP
font-size: 16px
line-height: 23px

Day line (Su, Mo...)

All viewports
color: #3d3d3d
font-family: F37 Ginger, Regular
font-size: 12px
line-height: 16px
Dates

All viewports
color: #3d3d3d
font-family: F37 Ginger, Bold

LVP, MVP
font-size: 14px
line-height: 18px

SVP, XSVP
font-size: 16px
line-height: 23px
Date boxes, available

All viewports
color: #3d3d3d
background-color: #FFF
border: 2px, solid, #68d2df
margin: ? (we'd want to make sure that two boxes with 2px borders next to each other don't appear as if there was 4px of borders)

Hover / focused
background-color: #68d2df
Date boxes, selected

All viewports
color: #FFF
background-color: #68d2df
border: 2px, solid, #68d2df

Selected box right and left arrows (within the border of the selected box)

All viewports
background-color: #3d3d3d
Date boxes, unavailable

All viewports
color: #3d3d3d
background-color: #dbd9d6
border: 2px, solid, #68d2df

Reservation module - IATA popup

View reservation module - IATA popup specs

Headline 6 (IATA #)(main style)(h6)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-align: center

LVP, MVP
font-size: 18px
line-height: 22.5px

SVP, XSVP
font-size: 16px
line-height: 20px
Paragraph (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: center

LVP, MVP
font-size: 18px
line-height: 26.5px

SVP, XSVP
font-size: 16px
line-height: 23px
Close icon (X)

Icon (located in DAM)
Container

All viewports
border: 2px, solid, #68d2df
background-color: #FFF (there should be no sectioning between headline and copy, as is seen on other sites)

Any padding should remain as dictated by previous implementations of this element

Chase section

Earn 60,000 Points with the IHG Rewards Club Card. Learn More

View chase section specs

Copy (main style)(Descriptive/Chase copy)

All viewports
color: #3d3d3d
font-family: F37 Ginger, Regular (400)
font-size: 14px
line-height:18px
Learn more link

All viewports
color: #3d3d3d
font-family: F37 Ginger, Bold
font-size: 14px
line-height:18px

Hover / focused
color: #e42c0f
Card image

General
ratio: 4:3

LVP, MVP, SVP
height: 45px

XSVP
height: 40px
Container

All viewports
padding: 10px
background-color: #f7f7f7

Introductory copy (mmt, pattern-centerxsleft)

Welcome to the future of the everyday hotel stay

We looked to guests like you to learn what's really important in an everyday hotel stay. With avid™ hotels, we’ve designed a straightforward, reliable, affordable hotel stay with you in mind. It’s the essentials done just right, every time.

View introductory copy specs

Headline 2 (main style) (h2)

General
color: #ff3a1e
font-family: F37 Ginger, Bold
padding-top: 10px
text-align: center

LVP
padding-bottom: 40px
font-size: 38px
line-height: 47.5px

MVP
padding-bottom: 30px
font-size: 38px
line-height: 47.5px

SVP
padding-bottom: 30px
font-size: 28px
line-height: 35px

XSVP
padding-bottom: 30px
font-size: 28px
line-height: 35px
text-align: left
Paragraph (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: center

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px
Container

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px

Value proposition (mmt, pattern-promo, col-xs-12 col-sm-4)

No-compromise sleep experience

Expect a room that's clean and designed for sound sleep, with our top-of-the-line mattress and luxurious bedding.

Free, grab-n-go allround breakfast

Enjoy high-quality breakfast options in 7 different tasty categories to keep you energized and ready for the day.

Your stay: just right, every time

We’re all about giving you a reliable, affordable hotel stay in a setting that’s safe and modern.

Value proposition (mmt, pattern-promo, col-xs-12 col-sm-4)

Container

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px
Images

All viewports
width: 100% (of column/container)
Ratio: 4:3
Dimensions: 800x600px
Headline 4 (main style)(h4)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
padding-top: 20px
padding-bottom: 10px
text-align: left

LVP, MVP
font-size: 24px
line-height: 30px

SVP, XSVP
font-size: 20px
line-height: 25px
Paragraph (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: left
padding-bottom: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Text link (main style)(a.tertiary)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Hover / focused
color: #e42c0f

Tour callout (mmt, pattern-ribbon scheme-lightgrey)

What to expect when you stay

Get a closer look at what you’ll see when you stay with avid™ hotels.
Take a tour

View tour callout specs

Container

General
height: auto

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px
Image

All viewports
Ratio: 16:9
Dimensions: 800x450px

LVP, MVP
width: 50%
height: auto
max-height: 400px

SVP, XSVP
width: 100%

Headline 3 (main style)(h3)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
padding-bottom: 10px

LVP, MVP
font-size: 28px
line-height: 35px

SVP, XSVP
font-size: 24px
line-height: 30px
Paragraph (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: left
padding-bottom: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Internal CTA (main style)(a.primary)

All viewports
color: #FFF
background-color: #ff3a1e
padding-top-bottom: 15px
padding-left-right: 30px
margin-top: 10px
font-size: 18px
line-height: 22px
border-radius: 5px

Hover / focused
background-color: #e42c0f

Promo Area (mmt, pattern-hpromo, col-xs-12)

Promotional area title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View promo area specs

Container

General
height: auto

LVP
padding-bottom: 80px

MVP, SVP
padding-bottom: 60px

XSVP
padding-bottom: 30px
Image

All viewports
Ratio: 4:3
Dimensions: 800x600px

LVP, MVP
width: 50%
height: auto

SVP, XSVP
width: 100%

Headline 3 (main style)(h3)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
padding-bottom: 10px

LVP, MVP
font-size: 28px
line-height: 35px

SVP, XSVP
font-size: 24px
line-height: 30px
Paragraph (main style)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: left
padding-bottom: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Text link (main style)(a.tertiary)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline

Outbound Arrow
width: 16px
padding-left: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Hover / focused
color: #e42c0f

Social (mmt, pattern-centerxsleft)

View social specs

Container

General
background-color: #f7f7f7

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px
Headline 2 (main style)(h2)

General
color: #ff3a1e
font-family: F37 Ginger, Bold
padding-top: 10px
text-align: center

LVP
padding-bottom: 40px
font-size: 38px
line-height: 47.5px

MVP
padding-bottom: 30px
font-size: 38px
line-height: 47.5px

SVP
padding-bottom: 30px
font-size: 28px
line-height: 35px

XSVP
padding-bottom: 30px
font-size: 28px
line-height: 35px
text-align: left
Paragraph (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Text link (main style)(a.tertiary)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline

Outbound Arrow
width: 16px
padding-left: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Hover / focused
color: #e42c0f
Images

All viewports
Ratio: 1:1
Dimensions: Varied, provided by bazaarvoice

Offers (mmts, top: pattern-centerxsleft, bottom: pattern-promo col-xs-12 col-sm-4)

Offer title on two lines ad astra pera

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit.

Offer title on two lines ad astra pera

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit.

Offer title on two lines ad astra pera

Lorem ipsum dolor sit amet, conse ctetur adipiscing elit.

View offers specs

Container

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px
Images

All viewports
width: 100% (of column/container)
Ratio: 2:1
Dimensions: 800x400px
Headline 2 (main style)(h2)

General
color: #ff3a1e
font-family: F37 Ginger, Bold
padding-top: 10px
text-align: center

LVP
padding-bottom: 40px
font-size: 38px
line-height: 47.5px

MVP
padding-bottom: 30px
font-size: 38px
line-height: 47.5px

SVP
padding-bottom: 30px
font-size: 28px
line-height: 35px

XSVP
padding-bottom: 30px
font-size: 28px
line-height: 35px
text-align: left
Paragraph, centerxsleft (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: center

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px
Headline 5 (main style)(h5)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
padding-bottom: 10px
text-align: left

LVP, MVP
font-size: 20px
line-height: 25px

SVP, XSVP
font-size: 18px
line-height: 22.5px
Paragraph, promo (main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: left
padding-bottom: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Text link (main style)(a.tertiary outbound)

General
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline

Outbound Arrow
width: 16px
padding-left: 10px

LVP, MVP
font-size: 18px
line-height: 26px

SVP, XSVP
font-size: 16px
line-height: 23px

Hover / focused
color: #e42c0f