Another use of the Intro Component is to break a page up into categories, and create obvious page breaks within content. For example, on a product page, you may want a section that delineates an overview of the product, and a section on how to apply, these headlines would work well with the branded appearance turned on within the Intro Text Component. When used in this way, it should be used minimally and with short headlines. This variation of the Intro Text component is not intended as the first component to start the page.
The Sticky Navigation is intended to help a user quickly navigate a page. It should be used on any pages that requires a lot of scrolling. A good rule of thumb is when using the Intro Text Component to break a page into categories, you should use the sticky navigation to jump to those categories. The linked text within the sticky navigation should be limited to 1 word, use your best judgement when selecting words. Note the sticky navigation on this page breaks the page up into three different components to easily view that content.
Every page has a hero component, this component should notify the visitor to where they are on the page. The Page Title for this component should be short and specific, for example “Member assistance & self help” and the Page Tagline should provide more information about this page with a branded tone, for example “Online, in-person and over-the-phone. We’re here to help.
Note: [Bracketed] content is intended as a visual representation of the fields represented within the components admin area.
Hero Image Selection
Hero Image Size: 1049X670
When selecting images for the hero, consider the overlay on left side of the image. 150px of the image will be covered by the overlay on desktop views.
On mobile and tablet views, the image will crop on the top and bottom, to improve content density. When selecting images, ensure the focal point of the image will appear nicely in the cent of the image no matter the screen size.
The admin area provides branded color options, select a color that is complimentary to the image, in the example above Teal is selected to compliment the colors of the image.
Images are not required for the hero, consider if the image is adding to the content of the page, for example, on a Rates page, getting the content higher on the page is more important than a hero image. The hero will adapt if no image is selected.