2 Components

Component (SMACSS module) rules

2.1 Alerts by Email

H2 text area (short sentence) with a button/link that takes the visitor to an email sign-up form.

Button States

Normal state:

  • Normal state: #78be20

Hover state:

  • Hover state: #00507f

Focus state:

  • Focus state: #00507f

Button Functionality

  • On click, visitor is taken to an email sign-up form.

Get news alerts by email

Subscribe

2.3 Article Date

The article date is viewed on the press release detail page. Stag Sans Book, 14px, #78be20

2.4 Article Listing

The Article Listing component includes a list of posted articles. Elements include a thumbnail image and text area with a title/link, date posted, location (for events), and optional description/summary. The pager component displays at the bottom of the list for access to additional articles.

Press release title, one line

June 6, 2015

Example of where a brief description would appear only if available and selected for inclusion as a summary

2.5 Awards

The Awards component is a section displaying three awards. Each Award includes an image (award/logo) and text area, with a title, subtitle, description and link.

Award Title

Award subtitle for award category

Brief intro about the award here Lor em ipsum dolor sit amet, he ndrerit vel vel, blan ditem est con

Discover more

Award Title

Award subtitle for award category

Brief intro about the award here Lor em ipsum dolor sit amet, he ndrerit vel vel, blan ditem est con

Discover more

Award Title

Award subtitle for award category

Brief intro about the award here Lor em ipsum dolor sit amet, he ndrerit vel vel, blan ditem est con

Discover more

2.6 Benefits

The Benefit component includes a group of three Benefit blocks. Each Benefit displays an image stacked over a text area with a title, description and link.

Content editor details:

• Image dimensions for all breakpoints should be 16:9 aspect ratio at 720 x 405px
• Tablet and mobile images will automatically retain desktop proportions and max-out the width.
• Include a static image 720 x 405px to fallback to

Tech details:

• Although the width of images on desktop is about 265px, using an image of 720px of width with 16:9 aspect ratio, will ensure the image quality is good on mobile where the image renders at at least 700px.

Benefit Title

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod sint exercitation eius

Read more

Benefit Title

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod sint exercitation eius

Read more

Benefit Title

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod sint exercitation eius

Read more

2.7 Block Quote

Component for block-quotes with attribution. Attribution is optional and should not be rendered if left blank.

"Sed ut perspiciatis unde omnis is te natus error sit mque laudantium, omnis iste natus error sit mque laudantium."
Name , Company
.block-quote--landing
Modifier for display in page content.
"Sed ut perspiciatis unde omnis is te natus error sit mque laudantium, omnis iste natus error sit mque laudantium."
Name , Company
.block-quote--simple
Modifier for display with only text, no quote.
"Sed ut perspiciatis unde omnis is te natus error sit mque laudantium, omnis iste natus error sit mque laudantium."
Name , Company

2.8 Blog - Hero

Content editor details:

• Image dimensions for all breakpoints should be 1440 x 500px.
• Tablet and mobile images will automatically retain desktop proportions and max-out the width.

Tech details:

• Desktop image dimensions are 1440 x 500px, using responsive image techniques images will proportionally resize for mobile and tablets.
• A black overlay with 50% transparency is added to hero images to ensure text on them is readable.

Blog hero image

The Hub

2.9 Blog - Hero Interior

Content editor details:

• Image dimensions for all breakpoints should be 1440 x 500px.
• Tablet and mobile images will automatically retain desktop proportions and max-out the width.

Tech details:

• Desktop image dimensions are 1440 x 500px, using responsive image techniques images will proportionally resize for mobile and tablets.
• A black overlay with 50% transparency is added to hero images to ensure text on them is readable.

Blog hero image
Author name
Jane Mau

Integrate more online content for travelers like Simon

June 3,2017

2.10 Blog - Interior

The Blog Interior component includes a a category label which is a taxonomy term. The label
links to a taxonomy term page where other blog posts with same label will be listed.
In additon, the blog post interior includes the body of the blog post which may or may not include
Images, videos, CTA and other elements.

Content editor details:

• A title field is required on the blog post interior.
• Blog body is a full html field which uses WYSIWYG to style and embed media in it.
• Other references fields are available in addition to Drupal's default fields.

Industry News

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices venenatis metus, faucibus accumsan metus dignissim non. Nunc vel quam accumsan, luctus arcu in, aliquet nunc. Proin lectus neque, sagittis sit amet cursus non, ultrices in leo. Proin et nisi faucibus, tincidunt diam et, euismod justo. Suspendisse malesuada velit eget elementum interdum. Phasellus eu rhoncus diam. Sed pulvinar at enim ultricies porta. Duis tincidunt, nisi ac volutpat vehicula, dui lectus pellentesque mi, eget dictum quam felis non est. Quisque egestas magna eleifend, ultricies sem quis, aliquam elit. Phasellus finibus volutpat purus ac sodales. Nam et odio molestie, tempus augue in, venenatis eros. Aliquam varius quam libero. Ut id felis tristique, porttitor lectus id, finibus nulla. Nulla eleifend posuere condimentum. Praesent justo massa, varius ut porta ac, feugiat a lorem. Vestibulum fermentum mi nulla, id semper nisi dignissim sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean convallis nisl magna, ac vulputate turpis maximus sed. Nulla facilisi. Quisque vel orci vitae lacus tempus interdum. Pellentesque ornare velit ac mi pellentesque pharetra. Quisque varius convallis finibus. Pellentesque ullamcorper imperdiet metus non pulvinar. Morbi rhoncus fermentum magna, id auctor metus pellentesque vitae.

2.11 Blog - Latest Posts

Content editor details:

• Image dimensions for all breakpoints should be 1440 x 500px.
• Tablet and mobile images will automatically retain desktop proportions and max-out the width.
• Same image dimensions apply to all items on blog landing page.
• Author images should be square and 200px. This will ensure they render properly in blog interior pages.

Tech details:

• Desktop image dimensions are 1440 x 500px, using responsive image techniques images will proportionally resize for mobile and tablets.
• A black overlay with 50% transparency is added to hero images to ensure text on them is readable.
• Author images on featured blog post and interior blog post pages are rendered at about 110px (square). Uploading images that are 200px will ensure they render in good quality in high-res devices.
• Author images in all non-featured blog items are rendered at about 60px.

2.12 Blog - Latest Posts More

Content editor details:

• Image dimensions for all breakpoints should be 1440 x 500px.
• Tablet and mobile images will automatically retain desktop proportions and max-out the width.
• Same image dimensions apply to all items on blog landing page.

Tech details:

• Desktop image dimensions are 1440 x 500px, using responsive image techniques images will proportionally resize for mobile and tablets.

2.13 Blog - Stay Connected

Stay Connected

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

2.14 Blog - Utility Menu

The Blog Utility Menu component is a collection of additional resources when in the Blog section.
The utility menu is collapsed by default by upon click, it expands into the screen to provided a better
UI for visitors to interact with it. In mobile the menu adjusts to fit smaller screens.

Technical Notes:

• A Share This drawer allows visitors to share the current post to many social media channels.
• Blog post can be filtered by author or topic.
• A handy Stay Connected widget makes it easy to subscribe to latest updates.

2.15 Branding

The Branding component provides different variations of Travelport branding including logo, logo orientation,
and responsive behavior.