Hero, Sticky Navigation & Intro Components

Sample usage and reccomended best practices.

Component Guidelines and Best Practices

The Hero, Intro Text and Sticky Navigation are usually the top components of a page, the combination of these components is your first opportunity impress users and entice them to keep navigating the page.

The Into Text Component

The Intro Text Component is intended as the first component of a page, to introduce a visitor to the content below, when used in this way, it should be used above the Sticky Navigation.

Below we break down the details of this component. Note: [Bracketed] content is intended as a visual representation of the fields represented within the components admin area.

The [Section Title] should be no more than one sentence long, it introduces a section.

The [Section Intro] is used to give more detail about the section. For example “Here are all the perks our members enjoy about OnPoint.” Note: If the intro text is closely related to the content directly below, use the Section Title & Section Intro within that component, as it will create minimal spacing between the intro and the content (note the spacing between this and the next component).

Intro Text with Branded Appearance

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.

Sticky Navigation

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.

Hero Component

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.

hero-noimage

Note: [Bracketed] content is intended as a visual representation of the fields represented within the components admin area.

sample hero

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.

Click to download template
HeroImageTemplate

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.

Note: Email should not be used to share important or sensitive information.

The security and privacy of your information is important to us. When communicating with us via email please do not send any information that is considered confidential or sensitive in nature. If you need to communicate any personal information (account numbers, social security number, etc.) please feel free to call the number listed in my profile or contact OnPoint Member Services at 503.228.7077 or 800.527.3932.

You are leaving OnPoint Community Credit Union.

The website you are about to visit is the responsibility of the party providing the site. Any transactions you enter into through this third-party site are solely between you and that vendor, merchant or other party. OnPoint’s Privacy Policy does not apply to this third-party site, and for further information you should consult the privacy disclosures of this site.

Cancel Accept