Hotel details style guide

This style guide features general styles the are used on the avid hotel details homepage. For more specific individual styles, please return to the main style guide. To see styles for universal assets (nav bar, footer, breadcrumbs) see the homepage style guide. To see what exactly was changed within this guide, please visit the change log.

Hotel details announcement

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
Read more
Read less
 

View hotel details announcement specs

Note: Although on LVP/MVP the padding-left-right is specified as 12%, this is only to match the way the hotel details hero is displayed. Please address this padding with whatever solution is taken with regards to that hero (as seen below).

Also, I was able to contain the content by adding specific percentage widths and a specific height to the text itself, and having it display as overflow: hidden. This feels like a half measure, and I defer to your best judgements as to how to actually go about making this functional.
Container

All viewports
background-color: #ff3a1e
padding-top-bottom: 10px
Descriptive copy (main style)

All viewports
font-family: F37 Ginger, Regular
text-align: left
float: left
font-size: 14px
line-height: 18px
color: #FFF
"Read more"

All viewports
font-family: F37 Ginger, Regular
text-align: left
float: left
text-decoration: underline
font-size: 14px
line-height: 18px
color: #FFF
"X" (Close section)

All viewports
font-family: Fontawesome
float: right
font-size: 14px
line-height: 18px
color: #FFF
Fontawesome icon: "Times", Unicode: f00d

Hotel details hero

avid hotels Oklahoma City

305 NW 5th St, Oklahoma City, OK 73102
1-888-888-8888
 4/5 ( 800 reviews)
from

987.65 ZMW

View hotel details hero specs

Container

LVP, MVP
height: 200px

SVP, XSVP
height: auto
padding-top-bottom: 30px
Headline 2 (hotel name)(main style)(h2.red)

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

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

SVP, XSVP
padding-bottom: 30px
font-size: 28px
line-height: 35px
Headline 2 (hotel price)(main style)(h2)

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

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

SVP, XSVP
padding-bottom: 30px
font-size: 28px
line-height: 35px
Paragraph (from, hotel information)(main style)(.p)

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

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

SVP, XSVP
font-size: 16px
line-height: 23px
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
Reviews 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

Hotel details reservation module

Book now
from 187.11 USD
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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.
Call for booking: 1-999-999-999

View hotel details reservation module specs

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

Tab Pane (information container)

All viewports
padding-top-bottom: 30px
background-color: #68d2df
More/fewer 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
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

Reservation module section

LVP, MVP
border-bottom: 4px, solid, #ff3a1e
Mobile 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
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

Call for booking

LVP, MVP
font-family: F37 Ginger, Regular
padding-top-bottom: 20px
border-top: 2px, solid, #FFFFFF
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

Gallery / map section

View gallery / map section specs

Gallery arrows

Left side arrow, all viewports
padding-top-right,-bottom: 15px
padding-left: 20px
OR
width: 40px (this is how I solved for these arrows in Webflow. However you can make them display as such is fine)
position: absolute
vertical-align: middle (?)
border-radius-top-right-bottom-right: 7px

Left side arrow, all viewports
padding-top-left-bottom: 15px
padding-left: 20px
OR
width: 40px (this is how I solved for these arrows in Webflow. However you can make them display as such is fine)
position: absolute
vertical-align: middle (?)
border-radius-top-left-bottom-left: 7px

Arrow icons:
Left
Right
Open/close gallery bar

All viewports
background-color: #3d3d3d
height: 30px
padding-top-bottom: 5px
color: #FFF
font-family: F37 Ginger, Regular
font-size: 14px
line-height: 18px
Map description text (paragraph)(main style)(.p)

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

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

SVP, XSVP
font-size: 16px
line-height: 23px
Get directions link (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

Gallery expanded (executive summary and contact shown for page content display only)

View gallery expanded specs

Open/close gallery bar

All viewports
background-color: #3d3d3d
height: 30px
padding-top-bottom: 5px
color: #FFF
font-family: F37 Ginger, Regular
font-size: 14px
line-height: 18px
Gallery thumbnail container

All viewports
background-color: #f7f7f7

Gallery thumbnail right/left arrows

All viewports
background-color: #3d3d3d (or, however this is typically accomplished)

Gallery Thumbnails should be sized and treated however they're being handled on other brands
Gallery image description

All viewports
color: #FFF
background-color:#ff3a1e

Hotel contact information

Check-in: 3:00pm Check-out: 11:00am
Front desk: 1-888-888-8888

View hotel contact information specs

Container

General
background-color: #68d2df

LVP, MVP
padding-top-bottom: 40px

SVP, XSVP
padding-top-bottom: 30px
Descriptor (i.e. Front desk:)

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

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

XSVP
font-size: 16px
line-height: 23px
max-width: 150px (or, however is easiest to ensure it breaks onto two lines)
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

Executive summary section

Free with every stay

Free with every stay:

Grab-and-go
Breakfast
Wi-Fi
24hr Gym
Parking
24hr Bean-to-cup
coffee

View executive summary section specs

Container (use half-spacer on bottom and top, and full width spacer with rule in the next section)

General
border-bottom: 4px, solid, #ff3a1e

LVP, MVP
padding-top-bottom: 40px

SVP, XSVP
padding-top-bottom: 30px
Headline 3 (main style)(h3.red)

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

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

SVP, XSVP
font-size: 24px
line-height: 30px

XSVP
text-align: left
Icons

All viewports
Ratio: 1:1
width: 40px
padding-bottom: 10px

LVP, MVP, SVP
align: center

XSVP
align: left
Note that on XSVP, these icons shift into two columns. Solve for this however you feel so inclined

Icon descriptions

General
font-family: F37 Ginger, Regula
max-width: 120px (or, however is best to insure proper line breaks)

LVP, MVP, SVP
text-align: center
font-size: 18px
line-height: 26px

XSVP
text-align:left
font-size: 16px
line-height: 23px
Text link (See additional...)(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

Hotel details value proposition (mmt, pattern-promo, col-xs-12 col-sm-4)

The everyday hotel stay you trust

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.

View hotel details value proposition specs

Container

LVP
padding-top-bottom: 80px
max-width: 1100px

MVP, SVP
padding-top-bottom: 60px

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

General
color: #ff3a1e
font-family: F37 Ginger, Bold
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
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 outbound)

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

Hotel reviews preview

See what our guests have to say

Our guests share with you about their stays with avid™ hotels.
Staff and service

4.5
Room & comfort

4.0
Value

3.9
Room cleanliness

4.4
Breakfast variety

3.9
Able to relax

4.0

A wonderful stay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Mauris rhoncus...
December 10, 2017 by Josh

View hotel reviews preview specs

Container

General:
background-color: #f7f7f7

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px
Text links (Read more, Read all...)(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
Headline 2 (main style)(h2.red)

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
Review block (i.e. Staff and service...)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
padding-top-bottom: 10px
border-bottom: 2px, solid, #68d2df

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


SVP, XSVP
font-size: 16px
line-height: 23px
Headline 3 (Review title)(main style)(h3)

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

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

SVP, XSVP
font-size: 24px
line-height: 30px
Reviewer name & date

All viewports
font-family: F37 Ginger, Light
font-size: 14px
line-height: 18px
align: bottom

Hotel details social (mmt, pattern-centerxsleft)

View hotel details social specs

Container

General
background-color: #FFFFFF

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

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

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

Additional hotel information

Additional hotel information

Rooms
Rooms
Modern & comfortable, our rooms have been specially designed for sound sleep. Each offers a high-quality mattress & bedding, energizing shower & toiletries, black-out roller shade, desk, 55” TV, storage area & USB ports. We have two room types: King and Double Queen.
In-room safe
Mini refridgerator
Grab-and-go Breakfast
Grab-and-go Breakfast
Kick-start your day with our free Good all round breakfast. Choose from a selection of muffins, bagels, Chobani yogurts, fruits, Quaker oats & cereal, hardboiled eggs & Belvita bars, plus fresh bean-to-cup coffee & a variety of Minute Maid juices.
Breakfast hours of operation
Breakfast menu
24hr Market
24hr Market
This convenient store offers refreshing cold drinks, a wide selection of snacks, & any necessities you may need i.e. toiletries, medicine etc.
Parking
Parking
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Mauris rhoncus...
Daily parking: xx.xx/XXX
Controlled access to parking
Garage parking
Garage parking size restrictions
Technology
Technology
Cast from your device to the 55” TV with free in-room WiFi.
Standard speed wireless internet locations
Description of other data connections
24hr Gym
24hr Gym
Our gym is open 24/7 for you to workout.

We provide a wide range of equipment for cardio, weight-training and resistance, including treadmills, spin bikes, elliptical trainers and weights.
Pet policy
Pet policy
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Mauris rhoncus...
Pets allowed
Service animals allowed
Pet walking area onsite
Pet deposit: xx.xx/XXX
Pet fee per night: xx.xx/XXX
Facilities
Facilities
Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Mauris rhoncus...
Smoke-Free Facility
Indoor pool
Heated indoor pool
Indoor Pool Hours of Operation:
Outdoor pool
Outdoor pool hours of operation:
Pool open from: [xxx to xxx]
PC available in business center
Computer printing
Local area shuttle
Local area shuttle complimentary
Hours of operation for complimentary local shuttle
Complimentary airport shuttle
Complimentary shuttle to and from convention center
Accessibility
Accessibility
[(Number of) accessible rooms]
Disabled or accessible parking
[(Number of) wheelchair-accessible parking spaces]
Roll-in showers
Hotel entrance is wheelchair accessible
Wheelchair accessible rooms
Wheelchair accessible elevators
Public restrooms are wheelchair accessible
Registration desk is ADA/wheelchair accessible
Exercise facility is ADA/wheelchair accessible
Business center is wheelchair accessible
Pool is ADA/wheelchair accessible
About our hotel
[SEO Block] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Mauris rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Mauris rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat massa non tempus. Nunc maximus euismod congue. Read more

View additional hotel information 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.red)

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
Accordion

General
background-color: #f7f7f7
color: #3d3d3d
font-family: F37 Ginger, Bold
text-decoration: underline
border-bottom: 2px, solid, #68d2df

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
Icons

All viewports
width: 40px
padding-right: 20px
Accordion arrow

All viewports
font-family: fontawesome
chevron-down Unicode: f078
color: #ff3a1e
font-size: 20px
line-height: 22px
Text link (Rooms, etc.)(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

Active (once clicked)
color: #ff3a1e
text-decoration: none
The hover state should be negated once an accordion has been selected. See above for prototype of actions
Accordion description content (paragraph)(main style)(.p)

General
color: #3d3d3d
font-family: F37 Ginger, Regular
text-align: left
padding-bottom: 20px (this is for instances where HCM content will live below the description. If it would function better as margin, or however you can see fit, do that. We just want there to be 20px of spacing at the bottom of these descriptions to separate them from HCM information)

LVP, MVP
font-size: 18px
line-height: 26px
padding-left: 62px (or whatever space is allotted for icons. This text should line up with the dropdown header)
padding-right: 20px

SVP, XSVP
font-size: 16px
line-height: 23px
padding-right: 0px
Accordion HCM content (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
padding-left: 62px (or whatever space is allotted for icons. This text should line up with the dropdown header)
padding-right: 20px

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

HCM Bullet / list styling

All viewports
font-size: 14px
SEO Headline 6 (paragraph)(main style)(h6)

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

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

SVP, XSVP
font-size: 16px
line-height: 23px
SEO copy (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