Flexible Long Form Component

Sample usage and recommended best practices.

Component Guidelines and Best Practices

The Flexible Long Form Component is diverse and has many variations including optional Sidebar Content, this next section will show the variations, and best practices for using them.

Component Overview

This overview shows the component fields and their intended use.  Note: [Bracketed] content is intended as a visual representation of the fields represented within the components admin area.

The [Section Title] is used to introduce the area of content, for example "How can I apply?"

The [Section Intro] is used to give more detail about the section. For example “Are you ready to apply, this section will help you gather what you need before you start.” The Section Title and Section Intro are similar to the Intro Text Component, this should be used in place of the intro text component when the content is intended to be closely connected.

The [Subhead] is to give more context to the section as needed, for example" Documents Required"

The [Supporting Content] field is used to provide long descriptive text about the section. This is intended to be at least a few sentences long, and only up to a few paragraphs should be displayed on default. If more than a paragraph is required, it is recommended that the “Show Read More Link” is used as shown here.

Anything below the read more link will only display if the user selects read more. Priority content that you want all users to see in should not be put in the More Content section.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Read more Optional [Button Text]
Long Form Text Component - Recommended Size

[Media Caption] Images used in the Long Form Component add visual interest to the content, it may display on the right or left of the content. When using a sidebar, it is recommended the image be placed on the left, allowing the text to go between the two. The height of the image is flexible and should be adjusted to created balanced page content.

Intro centered variation

Within the component settings, you may select Intro Centered, or Left Aligned.

Difference between centered and left aligned.

This example shows the Intro Centered, this will align the media and subhead with the top of the sidebar, where the Intro Left Aligned will align the Section Title to the top of the component. If you are not using a Section Title and Section Intro, content will auto align the top of the sidebar.

Optional [Button Text]
Long Form Text Component - Recommended Size


Component Stacking

To increase content density, you may group components together by stacking them.

Stacking Multiple Long Form Text Components

You can stack multiple Long Form Text Components. when doing so,  do not use the Section Title & Section Into, as this will decrese the spacing, and help the content to feel more connected.  Only use the Section Intro and Title to break up sections, this also enables you to stack multiple sidebar elements in one section, as shown here. It is recommended when stacking to be consistent with images, and sidebar usage. If text will be extra long consider using Read More link or text wrapping to avoid excessive white space.

Long Form Text Component - Recommended Size

Stacking Tip

If stacking Long Form Text Component, be consistent with the use of sidebar components, as this will help the content to stay symmetrical to the content above and/or below.

Example of Stacking Multiple Long Form Text Components

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

Long Form Text Component - Recommended Size

When stacking components

  • Only use section title & section intro in first iteration of component
  • If using images, keep them on the same side
  • Keep sidebar content on the same side
  • Mix Long Form and Mutlt-Column components, but be consistent with placement of sidebar
  • Be consitent with backgrund color to keep content conected
Long Form Text Component - Recommended Size

Wrap Media with Text

When using Media within the Long Form Component and the supporting content is longer than a paragraph, , turn on the Wrap Media with text functionality, as this will allow content to flow around the image, and improve content density.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.

When wrapping text

  • If text is longer than a paragraph, consider wrapping text
  • When using bulled content, a wrapped image should be on the right of the content
  • When using a sidebar, consider weather the image size will be best full size or within the content
Long Form Text Component - Recommended Size

Media Sidebar Component

The Media Sidebar is best used within the Multi-Column component when you only want to use one image, as this allows multiple boxes to reside next to the image.

When using this in the Long Form Component, the text will not wrap around the image, as shown below. If you have a lot of text that you want to display in the Long Form Component, use the Media Sidebar, as this will allow the text to go full-width of the screen allowing for better content density.

Long Form Text Component - Recommended Size

Rate Shortcode

Use the Rate Shortcode Sidebar to highlight a rate on a page. This is a great way to featured promotional rates right within the content.

An Icon is optional, but encouraged, as it will create visual interest and draw users to the rate. Select a background color that compliments any images used in the Long Form Text Component.

The title should always be short and specific ie: “Used Auto Loans” a rate shortcode can be used in place of the featured rate, as it will update automatically based on the rate in the featured rate table.

Use short button text, ie. “Apply for an auto loan” and longer text in the secondary CTA, ie. “Find your closest location to apply”

Note: Images used on the Long Form text Component will display wider, as the Rate Shortcode Sidebar is not as wide as the other sidebar components.  Be aware of this when stacking two Long Form Text Components on top of one another, consider featuring the Rate Shortcode Sidebar on the left of the content to keep content symmetrical.

Long Form Text Component - Recommended Size
[Product Name]
as low as
9.99%
APR

Single Path CTA in Sidebar

When using the Single Path CTA it should be the main CTA on row, consider using text links only in the Supporting Content of the main content, as this will allow you to add links that will not conflict with the main CTA, enticing users to take the main call to action. This component should be used higher on a page, as the main CTA of the page should be full width and near the bottom of the page.

Use the single path CTA sparingly on cream or grey backgrounds. As the CTA should be the main priority, and it will have less impact on a cream background

Long Form Text Component - Recommended Size

Single Path CTA Sidebar [Title]

An optional description can be added, but is not required [CTA Description]

Short descriptive text [Button Text]Longer decriptive link [CTA Secondary Button]

Additional sidebar options

The Long Form Component is very flexible with the multiple sidebar content configurations.

View all sidebar options

Cream Background Option

The Long Form Component has an optional cream background.

This should be used minimal as it is intended to break up page content on a page, and make a notable change within the content. When using sidebar components, they may have less of an impact on a cream background, keep this in mind when using the cream background option. It is not recommended to use the CTA component on cream, as it will lose its impact.

Cream Background option is also available on the Intro Text and Multi-Column Components, consider pairing these component together with cream background to form a section within longer page content.

Images

Images

This section will cover image sizes, when to use and not images, as well as background options for images

Borders & Alignment

Image alignment: Within the Long Form Component, you may choose the align an image to the Right or Left of the Content (aligned right in this instance). If using Sidebar Content, it is recommended that the image be aligned left, the contents of the component (image, the content block and the sidebar) will appear symmetrical.  

Image borders: On default images with the Long Form Component will have a transparent white border inset on them. If you want to add more depth to an image, you may want to add a  branded element to the photography on the page. If using a Long Form Text component with no sidebar content, adding a border to an image is a great way to add a design element to a row adding an OnPoint branded feel. Note the green bars around the image to the right. 

Long Form Text Component - Recommended Size

Image Dimensions

Images for the long form component can be modified to create symmetry within the page content. The recommended size is a guide, but image sizes are intended to be flexible to accommodate the content. If using a taller sidebar component, like a Bio or CTA, you should consider a taller image.

Long Form Component
Recommended Size: 540X300px
Variations: 540X540px, 540X700 [shown here],
Note: borders will adjust to accommodate the size of the image that has been uploaded. 

Media Sidebar 
Recommended Size: 540X300px
Variations: 540X540px, 540X700px

fpo-tall

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