Hotel details reviews page style guide

This style guide features general styles the are used on the avid hotel details reviews page. 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
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

Introductory copy (mmt, pattern-centerxsleft)

Guest reviews

Each review and rating we receive is verified to ensure that we display only information provided by guests who have actually stayed in the hotel.

View introductory copy specs

Container

All viewports
border-top: 4px, solid, #68d2df

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
text-align: center

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

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

Guest reviews - Bazaarvoice

View guest reviews - Bazaarvoice specs

Container

All viewports
background-color: #f7f7f7
Copy

General
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)

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