Classic Components

View New Components Instead

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

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: 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: 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

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

Video Specs

• YouTube or Vimeo Hosted

Suggested Maximum Characters

• Headline: 35 Characters
• Body Copy: 58 Characters

Component Notes

• Append “?rel=0” to the end of the embed code so that “related” and/or undesirable content does not stream after
• Video must be made public to embed
• Background color can be gray, blue or green (see above example)

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

• 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: 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: 30 Characters

Component Notes

• Can support icon

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.

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