Component Examples

Using This Page

The purpose of this page is to guide future page development and existing page enhancement. This is the Body Component. 

Details for this and other components are included in this section. You will need to reference the name of the component within the CMS to identify them if you are unfamiliar with their names and how they look.

Style Guide:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Overall component usage notes:

There are four components which are meant to be utilized at the top of a page. That is, in the Pre Body Component section of the CMS. There are also two which should always be placed last on the page. Please note all of these components below and their notes for use.

Top of page components

  1. Hero Unit: The fields filled out in the example on this page should be the only fields utilized on a typical page. Note recommended character counts within example component and image size specs.
  2. Alternative Hero: The fields filled out in the example on this page should be the only fields utilized on a typical page. Note recommended character counts within example component and image size specs.
  3. Body Component: This means that there are no components loaded into the Pre Body Component section of the CMS.
  4. Embedded Video: When the video is the content of focus this component can be utilized as the first component on the page. If the video is not the main content of the page the Hero Unit should be used. This component requires a YouTube link.

**Note: The entry of these components next to each other on this page results in a white bar separating the components. This is because these components are not meant to be next to each other. When employed correctly, components have proper spacing.

Last on page components

  1. Promo: this component can also be utilized on the page between components. But is one of the two options for the last component on a page. Note recommended character counts within example component and image size specs.
  2. Related Content: if utilized this will always be the last component on the page.

Notes for use of all components

Nav Menu: This component should always be paired with a Hero Unit or Alternative Hero component. Recommended number of menu items 4. This component should be used sparingly. The optimal utilization can be seen on /cities/star-valley  where the content specific to Star Valley would not be immediately accessible in the main nav and would require filtering of other listing grids. If a tertiary navigation is necessary the secondary navigation on the Body Component should be favored.

Body Component: Aside from the additional guidelines above this component has additional functions. Images can be entered into this component to break up blocks of text. These images will always automatically size. It is recommended that images are placed in image-centric components, and text is continued in a single column component below the image component. Grids cannot be entered here. Header styles should be utilized for SEO purposes and to establish content hierarchy and not for exclusively for formatting.

In addition to the WYSIWYG editor for text entry, this component as an additional call to action which falls below any text entered in the editor. This component also has a secondary navigation capability. This navigation should be used as the only secondary navigation on a page and never when a Nav Menu component is used on the page. The side navigation can be entered in the Body Component section of the CMS.

Embedded Video: This component as explained above, can be utilized as the first component on a page when it is the focus of the content. When used as the first component do not use the component’s Display Title field. It requires a YouTube link. This component can also be utilized between other components on the page.

Content Carousel: There are multiple customizations available for this component. Designed to provide visuals with a description, the image can be aligned on the left or right side when a description is entered. Multiple slides can be added and arranged. Images must be between 1400×800 and 2800×1600 pixels. The subject is recommended to be center focused.

Image Grid: Images can be accompanied by a description and a call to action button, or just one or the other. The descriptions are hidden on mobile. Character count recommendations for each field are as follow: CTA – 128 characters max, Overlay text – 60 characters max, Title Field – 18 characters max. These counts are based on the use of all three fields at once. Maximums can be inflated when only one or two of the fields are utilized.

Ad Units 300×250 and 465×143: There are two Default components which should always be utilized instead of creating new components. DFP – 465×143:Default (530) and DFP – 300×250:Default (531) should be searched and added. Both of these components should be on every single page. Their placement adjusts slightly depending on the content of the page. If the Body Component is utilized DFP – 465×143:Default (530)  should directly follow it, as the first component in the Post Body Components section of the CMS. This component version should be utilized to break up large blocks of content, for example on a sponsored article, where the majority of the page is text. If the page is predominantly listings this would be the component be directly before the listing grid component. DFP – 300×250:Default (531) on a listing page would directly follow the listings. When listings are not present this component should be placed before the final component, but never between multiple promo components or between a promo component and the related content.

Single Column: This component can be used independently or as a continuation of the body component. If there is a long article an image component can be placed midway to break up the copy and this component would then be the continuation of the article.

Listings: These grids pull content from the Extranet. The content can be brought in based on the data category of business Listings, Deals, and Events. The data cannot be combined. Only one listing component can be placed on a page. There are default components for each of the categories (Listings:Profile – Places To Stay (479) accommodations listings, Listing:Profile – Default (480), Listings:Event – Default (487), Listings:Deals – Default (492)). The exact data to be pulled in is controlled within the Related section of the CMS in the selection window.

Three Up Grid:  The use of this component is flexible. The content can be used as navigation or as more of an information gallery. The description has a character count maximum of 250.

Block Quote Carousel: Use this component, to highlight quotes from partners about their destination, or a quote from social media or other earned media. The component can house multiple quotes. Content could also be quotes from other articles used as a teaser to other content. Character count max is 250 with spaces.

Two Column: Image + Text:  This component can support an image and description. Best use for this is a longer description or as a teaser to another article or section of the site.

Two Column: Text + Text:  Like the Body Component and Single Column component this component is meant to break up blocks of text visually. If there is a long article an image component can be placed midway to break up the copy and this component would then be the continuation of the article.  Copy should be the only thing entered in this component. An optional call to action button can follow the component.

Promo: One of the two components that can finish a page. This component can be utilized in many ways. The description, the suggested longer portion of copy is hidden on mobile. Recommended use is for this as an end of page component is to suggest another article or page of interest, keep the user moving through the website or if appropriate an e-newsletter sign up or guide order.

Related Content: This will always be the last component on a page. The content pulled in is controlled within the Related section of the CMS in the checkbox list.

 

 

135