Offers page style guide

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

Introductory copy (mmt, pattern-centerxsleft)

Offers

"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

View introductory copy specs

Container

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

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

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

Full width image & tabs (image: pattern-image, tabs: layout, tabs)

avid hotels offers

Did somebody say discounts? Check out our latest special deals and discounts and get your savings on!

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.

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.

Other IHG offers

Upgrade your stay with a hotel package full of perks. Book now. Thank yourself later.

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.

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.

IHG Rewards Club offers

Points please! Earn more—and enjoy more—with special offers just for IHG Rewards Club members.

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.
avid hotels offers
avid hotels offers

Add more value to your stay

Did somebody say discounts? Check out our latest special deals and discounts and get your savings on!

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.

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.
Other IHG offers
Other IHG offers

Other IHG offers

Upgrade your stay with a hotel package full of perks. Book now. Thank yourself later.

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.

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.
IHG Rewards Club offers
IHG Rewards Club offers

IHG Rewards Club offers

Points please! Earn more—and enjoy more—with special offers just for IHG Rewards Club members.

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.
avid hotels offers
avid hotels offers

Add more value to your stay

Did somebody say discounts? Check out our latest special deals and discounts and get your savings on!

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.

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.
Other IHG offers
Other IHG offers

Other IHG offers

Upgrade your stay with a hotel package full of perks. Book now. Thank yourself later.

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.

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.
IHG Rewards Club offers
IHG Rewards Club offers

IHG Rewards Club offers

Points please! Earn more—and enjoy more—with special offers just for IHG Rewards Club members.

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 full width image & tabs specs

Image
width: 100%

LVP, MVP
Ratio: 16:5
Dimensions: 1440x450px

SVP, XSVP
Ratio: 2:1
Dimensions: 640x320px

Tabs

LVP, MVP
margin-top: -64px

SVP, XSVP
margin-top: 0px
Tab Headers (i.e. avid hotel offers)

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
Container

LVP, MVP
border-top: 10px, solid, #68d2df

SVP, XSVP
border-top: 0px
margin-bottom: 2px

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

Other IHG offers

Upgrade your stay with a hotel package full of perks. Book now. Thank yourself later.

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 tabs content 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 3 (main style)(h3)

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

LVP
font-size: 28px
line-height: 35px
padding-bottom: 40px

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

SVP, XSVP
font-size: 24px
line-height: 30px
padding-bottom: 30px
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
Offer rows

LVP
padding-top-bottom: 80px

MVP, SVP
padding-top-bottom: 60px

XSVP
padding-top-bottom: 30px
Headline 5 (offer name)(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 (offer description)(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)

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