Original Components

Page Titles (like above "Original Components") are limited to 40 characters before they wrap to a second line.

This is our collection of Original Components. Many of them can be used with our Full Width Components as well.

Suggested Maximum Characters

• Headline: 25 Characters
• Body Copy: 80 Characters

Component Notes

• Can support table/chart/image within body

Calls to action are an imperative tool to drive desired activity for our customers. Below are some things to consider:

• CTAs should be written in sentence case
• CTAs should be tagged to ensure effective analytics tracking is in place
• Standalone links should be either in button form (with enough contrast per WCAG standards) or in blue text, where underline appears when in hover state

Suggested Maximum Characters

• Row content: 80 Characters

Icon Specs (Font Awesome)

• Font size: 18px
• Any Font Awesome 5 Pro icon will work
• To generate checkmark, use Font Awesome Family 5, check-circle
• To generate red exclamation point, use Font Awesome Family 5, use exclamation-circle

Component Notes

• Component allows for full-width subhead/category descriptor within table

Image Size – Desktop, Tablet and Mobile

• Height: 420px
• Width: 1440px

Suggested Maximum Characters

• Headline content: 25 Characters
• Subhead content: 40 Characters
• Line-item content: 40 Characters

Icon Specs (Font Awesome)

• Icon font size: 40px; Font weight 300
• Any Font Awesome 5 Pro icon will work

Component Notes

• Any html should be supported in box
• Box stacks content on mobile
• Image does not display on mobile

A content block can support long form copy.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Size - Desktop, Tablet and Mobile

• Width: 736px
• Height: 368px

Suggested Maximum Characters

• Headline: 25 Characters
• Body Copy: 80 Characters

Component Notes

• Image not required
• Should be used x2 or x3 (as depicted above)

Image Size - Desktop, Tablet and Mobile

• Width: 736px
• Height: 679px

Suggested Maximum Characters

• Headline: 35 Characters
• Body Copy: 175 Characters

Component Notes

• CTA button is not required
• Image can be to the left or right of copy. Indicate preference in build documents
• Copy background can be: Blue, Gray or Green

Image Size - Desktop, Tablet and Mobile

• Width: 736px
• Height: 679px

Suggested Maximum Characters

• Headline: 30 Characters
• Body Copy: 55 Characters

Component Notes

• CTA links are not required
• Image can be to the left or right of copy. Indicate preference in build documents
• Copy background can be: Blue, Gray or Green

Image Size - Desktop, Tablet and Mobile

• Width: 950px
• Height: 225px

Suggested Maximum Characters

• Headline: 40 Characters
• Body Copy: 65 Characters

Component Notes

• CTA not required

Suggested Maximum Characters

• Headline: 30 Characters
• Body Copy: 70 Characters

Icon Specs (SVG on Transparent Background)

• Width: 500px
• Height: 500px

Component Notes

• CTA is not required
• Footer is not required
• Icon is not required
• Icon is left align only, does not center

• Height: 365px
• Width: 940px

Component Notes

• Layout as Feature Video component type, follow its component guidelines
• Implement data-background-desktop=”” for image background

Image Size - Desktop, Tablet and Mobile

• Width: 950px
• Height: 300px

Suggested Maximum Characters

• Headline: 30 Characters
• Body Copy: 90 Characters

Component Notes

• CTA link is not required
• CTA link can be hyperlinked, displayed as a button
• Component can support just a headline
• Gray block copy background can be removed
• Copy not required
• Copy color can be altered

Icon Specs (SVG on Transparent Background)

• Width: 500px
• Height: 500px

Suggested Maximum Characters

• Headline: 25 Characters
• Body Copy: 70 Characters

Component Notes

• Has a headline, lead-in copy and a ‘View More’/’View Less’ expandable
• Icon is optional
• Can be defaulted to opened
• Can support table/chart/image within body

Icon Specs (SVG on Transparent Background)

• Width: 500px
• Height: 500px

Suggested Maximum Characters

• Headline: 25 Characters
• Body Copy: 70 Characters

Component Notes

• CTA button not required
• Box background color options: white, blue, gray, green, primary-blue, primary orange, quaternary-blue, quaternary-gray, quaternary-green, quinary-blue, quinary-green, secondary-blue, senary-gray, senary-green, tertiary-gray, tertiary-green, tertiary-orange, alert-tertiary-yellow, alert-primary-red (do not use orange/red unless it is an important alert)
• Font color options: white, black, blue, green, gray

Component Notes

• CTA button not required
• Box background color options: white, blue, gray, green, primary-blue, primary orange, quaternary-blue, quaternary-gray, quaternary-green, quinary-blue, quinary-green, secondary-blue, senary-gray, senary-green, tertiary-gray, tertiary-green, tertiary-orange, alert-tertiary-yellow, alert-primary-red (do not use orange/red unless it is an important alert)
• Font color options: white, black, blue, green, gray

Image Size - Desktop, Tablet and Mobile

• Width: 714px
• Height: 115px

Suggested Maximum Characters

• Headline: 25 Characters
• Body Copy: 65 Characters

Component Notes

• Should be used as x1
• Should not be used with long-form copy as it does not work well in mobile
• Body copy is dropped in mobile
• Can implement filter over image to enhance readability (see above example)
• Font color options: white, black, blue, green, gray
• CTA button not required

Image Size – Desktop, Tablet and Mobile

• Height: 400px
• Width: 1440px

Suggested Maximum Characters

• Headline content: 25 Characters
• Box title content: 10 Characters
• Box subhead and line-item content: 40 Characters
• CTA: 10 Characters

Icon Specs (Font Awesome)

• Large icon font size: 68px; Font weight 400
• Small icon font size: 24px; Font weight 200
• Any Font Awesome 5 Pro icon will work
• To generate checkmark, use Font Awesome Family 5, check-circle
• To generate rates icons, use custom icon set in Sitecore

Component Notes

• Boxes stack on mobile
• Image does not display on mobile

Image Size - Desktop, Tablet and Mobile

• Width: 736px
• Height: 368px

Suggested Maximum Characters

• Body Copy: 20 Characters

Component Notes

• Copy on the image OR any color lines must be on the image itself (not added in the CMS)
• Best suited for x2 or x3

Image Size - Desktop, Tablet and Mobile

• Width: 1440px
• Height: 420px

Component Notes

• Used with a Top Banner, can add a Widget, 2 Feature Boxes or Landing Banner

Suggested Maximum Characters

• Headline: 45 Characters
• Body Copy: 550 Characters

Component Notes

• CTA is not required

Image Size - Desktop, Tablet and Mobile

• Width: 660px
• Height: 420px

Suggested Maximum Characters

• Headline: 20 Characters
• Subheader: 60 characters
• CTA: 15 Characters

Component Notes

• CTA is not required
• Subheader copy is not required
• Can implement light or dark filter behind text for readability (dark filter implemented in above example)

Image Size - Desktop, Tablet and Mobile

• Width: 342px
• Height: 253px

Suggested Maximum Characters

• Headline: 25 Characters
• Body Copy: 35 Characters

Component Notes

• Filter can be added over image (see right image above)
• Should be used as x2 or x3

Suggested Maximum Characters

• Headline content: 20 Characters
• CTA: 20 Characters

Component Notes

• Text only in boxes
• Boxes stack on mobile

Image Size - Desktop, Tablet and Mobile

• Width: 736px
• Height: 368px

Suggested Maximum Characters

• Body Copy: 115 Characters

Component Notes

• Thumbnail version of image also required (110x55)

Image Size - Desktop, Tablet and Mobile

• Width: 400px
• Height: 550px

Suggested Maximum Characters

• Headline: 20 Characters
• Body Copy: 55 Characters

Component Notes

• Best used in x3

Suggested Maximum Characters

• Body Copy: 300 Characters

Component Notes

• Background Color Options: tertiary-blue, quaternary-blue, tertiary-green, quaternary-green, primary-gray, secondary-gray, tertiary-gray
• Font Color Options: black-text, primary-gray-text, quinary-gray-text, white-text
• Must have consent from person providing the quote (see Legal for appropriate consent form)

Text Size

• Quote: 15px
• Name and city: 13px

Use Case

• A customer or business testimonial for Consumers, a program etc.