Flexible Long Form Component
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?
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 with Bio in Sidebar
Lorem ipsum dolor
Placeholder copy here 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.
Adam Rousse
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.
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.
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
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
Sidebar Content
Within the Long Form Components there are multiple sidebar content options that can be used to help diversify the content displayed within a row. Here we cover what options are and best practices for how to use them to increase content density and help visitors navigate the site.
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.
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.
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
Single Path CTA Sidebar [Title]
An optional description can be added, but is not required [CTA Description]
Additional sidebar options
The Long Form Component is very flexible with the multiple sidebar content configurations.
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.
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