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.Read more Optional [Button Text]
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.
- 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
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.
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
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.
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.
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.
Recommended Size: 540X300px
Variations: 540X540px, 540X700px