Stylesheet

Colors and Photo Specs

Accessible color palette
Young couple smiling and shaking hands with a friendly banker

Photos throughout – 590px x 350px

Young adult female at cash register paying for items with a debit card and smiling

Blog featured images – 900px x 550px

Fonts and Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text looks like this, and looks great! 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. How do those line wraps look?

  • Bulleted text looks like this, and looks great! Here is more information about this subject. Use bulleted text to draw attention quickly to information, facts, or important statistics.
  • Bulleted text looks like this, and looks great! Here is more information about this subject. Use bulleted text to draw attention quickly to information, facts, or important statistics.
  • Bulleted text looks like this, and looks great! Here is more information about this subject. Use bulleted text to draw attention quickly to information, facts, or important statistics.

Styling Notes:

New paragraph rows and sections should start with a 50px top/bottom margin

Accented Dividers

Use these colored dividers to add accents as well as division between headings and body text. TO USE: Add class name to “Extra class name” in TEXT BLOCK for heading text; (if used with multiple columns – Add padding {8%} to the right on inner column settings)

green-divider

#d9ecd3

Doesn’t that pop of color just add that perfect touch! Perfect for use to display various options within a service (see Share Accounts page for an example!).

orange-divider

#e45a34

Doesn’t that pop of color just add that perfect touch! Perfect for use to display various options within a service (see Share Accounts page for an example!).

yellow-divider

#f5c95e

Doesn’t that pop of color just add that perfect touch! Perfect for use to display various options within a service (see Share Accounts page for an example!).

Blue/Gray BG Headline Accent Row

Set a full-width row with 40px top and bottom padding, and enter the following Hex code for background color: #e8edf0

Set an inner row (in grid) and add text block; Heading will be Heading 3

Green BG Headline Accent Row

Set a full-width row with 40px top and bottom padding, and enter the following Hex code for background color: #d9ecd3

Set an inner row (in grid) and add text block; Heading will be Heading 3

Dark Blue BG Headline Accent Row

Set a full-width row with 40px top and bottom padding, and enter the following Hex code for background color: #134b67

Set an inner row (in grid) and add text block; Heading will be Heading 3; Extra class name ‘white’