Website Style Guide

This page represents the components of EvansBank.com for testing and evaluation purposes. All content and imagery below is FPO.

Note: Header and Footer Navigation, “Dynamic” homepage hero, Chat icon, sidebar navigation, and rollover states are not yet fully functional.

Use the links below to jump to sections of the page. Click the Chat icon in the lower right to jump back to the top of the screen.

• Heroes
• Grid Boxes
• Blog Boxes
• People Boxes
• CTAs
• Basic Content
• Lists & Accordions
• Tables
• Highlights

Heroes

The following represents the various “hero” sections that can start the various pages within EvansBank.com. The first “Dynamic” hero would only be featured on the homepage of the site.

• About Evans Bank
• >
Style Guide

This is the
headline

Dolor sit amet, lariat consectetuer adipiscing elit. Perus commodo ligula eget dolor.

Learn more >

• Spending
  • Checking
  • Online and Mobile Banking
  • Evans Debit Mastercard^®
  • Overdraft Service
• Saving
  • Savings
  • Health Savings
  • Private Banking
• Borrowing
  • Mortgages
  • Home Equities
  • Personal Loans

This is the
headline

Learn more >

• About Evans Bank
• >
Style Guide

This is the
headline

This is a quick test of the description here. How long can we gooooooo?

Learn more >

Grid Boxes

The homepage of the EvansBank.com website and dynamic content is based on a concept boxes aligned in a grid.

This content is dynamic, with a custom background image and copy per box. Where possible, headlines utilize manual BRtags to provide specific breaks to balance the headlines. These break tags are removed on smaller screens to allow the content to flow more naturally.

Style Options

To aid in ADA compliance, there are multiple stylistic options per box:

• Basic – No Image, orange copy
• Orange Saturation – Agressive orange on grayscale image w/ Multiply filter, white copy
• Orange Overlay – Orange on desaturated image w/ Multiply filter and orange cover with dropped opacity, white copy
• Orange Corner – Orange gradient in bottom left w/ dropped opacity, white copy
• Greyscale – Greyscale image, white copy w/ text shadow
• Contrast Overlay – Black w/ Overlay filter, white copy w/ text shadow
• Contrast Corner – Black gradient in bottom left w/ Multiply filter, white copy w/ text shadow

Note: All style options are dynamically generated and may not work 1:1 across all web browsers. Not all styles will be rolled out the final website, this are all proof-of-concept to see what we like stylistically.

Example of a
box with
an orange corner

Learn more >

Box with
an orange
saturation

Learn more >

Example of
box with
Contrast Corner

Call to action >

Automatic
greyscale image

Example link >

Another piece of content

Learn more >

Stressless
Retirement Planning

In ligula tellus, tempor sit amet justo ac, fringilla dignissim mauris. Donec ipsum nisl, commodo quis elit in, ullamcorper maximus justo.

Learn more >

Making changes that add up

12/24/19

►

Watch Video

Orange Overlay Style

Learn more >

“Testimonium dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.”

Name Surname, Description

Basic Content Section

The content below represents how basic content will flow onto a page. 

Morbi tincidunt tempus porttitor. Nunc vel lorem congue, consectetur neque at, posuere erat. Donec quis urna dolor. Maecenas feugiat ultrices tellus vel lobortis. In ligula tellus, tempor sit amet justo ac, fringilla dignissim mauris. Donec ipsum nisl, commodo quis elit in, ullamcorper maximus justo. Morbi vel tellus ut ex dictum ultricies quis eget nulla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquet odio non nisl mollis, a aliquam risus molestie. Praesent bibendum cursus enim id consectetur. Aliquam leo nibh, hendrerit quis odio non, sollicitudin tempus justo. Quisque tincidunt ante augue. Pellentesque convallis mauris dictum dictum maximus. Phasellus neque nibh, porttitor sed dictum a, dapibus eu justo. Nam commodo lectus vitae lorem maximus aliquet. Integer tincidunt cursus magna eget varius. Duis in elit ac nisl fringilla mollis. Curabitur ex justo, rhoncus eget sapien id, varius pellentesque ligula. Ut placerat purus diam, eu congue nulla auctor vitae.

Tertiary Headline Size Goes Here

Pellentesque id pellentesque neque. Donec vehicula et quam eu ornare. Morbi suscipit massa a felis imperdiet, eu aliquet diam mattis. Suspendisse laoreet risus magna, sit amet fringilla tortor faucibus sed. Ut vitae mi turpis. Nulla porttitor nisi vitae augue fermentum, sed egestas nunc porttitor. Fusce vel quam dapibus, dapibus magna in, porta nisl. Cras mattis magna vel velit euismod volutpat.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquet odio non nisl mollis, a aliquam risus molestie. Praesent bibendum cursus enim id consectetur. Aliquam leo nibh, hendrerit quis odio non, sollicitudin tempus justo. Quisque tincidunt ante augue. Pellentesque convallis mauris dictum dictum maximus. Phasellus neque nibh, porttitor sed dictum a, dapibus eu justo. Nam commodo lectus vitae lorem maximus aliquet. Integer tincidunt cursus magna eget varius. Duis in elit ac nisl fringilla mollis. Curabitur ex justo, rhoncus eget sapien id, varius pellentesque ligula. Ut placerat purus diam, eu congue nulla auctor vitae.

Tertiary Headline Size Goes Here

Morbi tincidunt tempus porttitor. Nunc vel lorem congue, consectetur neque at, posuere erat. Donec quis urna dolor. Maecenas feugiat ultrices tellus vel lobortis. In ligula tellus, tempor sit amet justo ac, fringilla dignissim mauris. Donec ipsum nisl, commodo quis elit in, ullamcorper maximus justo. Morbi vel tellus ut ex dictum ultricies quis eget nulla.

• Sed rhoncus magna sit amet arcu consectetur, eget semper justo pellentesque.
• Nullam varius neque ac nisl consectetur vehicula.
• Donec dapibus enim vel turpis suscipit, ut aliquet ante faucibus.
• Praesent sed ipsum vitae arcu aliquet tempor.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquet odio non nisl mollis, a aliquam risus molestie. Praesent bibendum cursus enim id consectetur. Aliquam leo nibh, hendrerit quis odio non, sollicitudin tempus justo. Quisque tincidunt ante augue. Pellentesque convallis mauris dictum dictum maximus. Phasellus neque nibh, porttitor sed dictum a, dapibus eu justo. Nam commodo lectus vitae lorem maximus aliquet. Integer tincidunt cursus magna eget varius. Duis in elit ac nisl fringilla mollis. Curabitur ex justo, rhoncus eget sapien id, varius pellentesque ligula. Ut placerat purus diam, eu congue nulla auctor vitae.

Morbi tincidunt tempus porttitor. Nunc vel lorem congue, consectetur neque at, posuere erat. Donec quis urna dolor. Maecenas feugiat ultrices tellus vel lobortis. In ligula tellus, tempor sit amet justo ac, fringilla dignissim mauris. Donec ipsum nisl, commodo quis elit in, ullamcorper maximus justo. Morbi vel tellus ut ex dictum ultricies quis eget nulla.

• Test list one
• Test list two
• Test list three
• Test list four
• Test list five

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum aliquet odio non nisl mollis, a aliquam risus molestie. Praesent bibendum cursus enim id consectetur. Aliquam leo nibh, hendrerit quis odio non, sollicitudin tempus justo. Quisque tincidunt ante augue. Pellentesque convallis mauris dictum dictum maximus. Phasellus neque nibh, porttitor sed dictum a, dapibus eu justo. Nam commodo lectus vitae lorem maximus aliquet. Integer tincidunt cursus magna eget varius. Duis in elit ac nisl fringilla mollis. Curabitur ex justo, rhoncus eget sapien id, varius pellentesque ligula. Ut placerat purus diam, eu congue nulla auctor vitae.

Accordion

• Accordion Item One

  Quisque non blandit ipsum, vel convallis justo. Quisque eget convallis urna, sit amet lacinia quam. Praesent sollicitudin, nisl eu euismod consectetur, neque erat congue nulla, in vestibulum neque neque id felis. Fusce accumsan quam sed nulla tincidunt auctor. Nam a dui non leo scelerisque mollis a ut enim. Ut egestas posuere tempus.

• Second Accordion Item

  Quisque tincidunt ante augue. Pellentesque convallis mauris dictum dictum maximus. Phasellus neque nibh, porttitor sed dictum a, dapibus eu justo. Nam commodo lectus vitae lorem maximus aliquet. Integer tincidunt cursus magna eget varius. Duis in elit ac nisl fringilla mollis. Curabitur ex justo, rhoncus eget sapien id, varius pellentesque ligula. Ut placerat purus diam, eu congue nulla auctor vitae.

• Third Item

  Integer tincidunt cursus magna eget varius. Duis in elit ac nisl fringilla mollis. Curabitur ex justo, rhoncus eget sapien id, varius pellentesque ligula. Ut placerat purus diam, eu congue nulla auctor vitae.

CTA Boxes

While there are no specific boxes dedicated to CTAs, the following is the recommended style treatment for consistancy.

Notes: Only one CTA would exist per page. The “Card” CTA does not have the appropriate background color due to the dropshadow being baked.

Closing CTA, Customized to the page

Dolor sit amet, lariat consectetuer adipiscing elit. Perus commodo ligula eget dolor.

Learn More >

Closing CTA,
Customized to the page

Dolor sit amet, lariat consectetuer adipiscing elit. Perus commodo ligula eget dolor.

Learn More >

Closing CTA,
Customized to the page

Dolor sit amet, lariat consectetuer adipiscing elit. Perus commodo ligula eget dolor.

Learn More >

Highlights

The lists below allow you to highlight specific facts, features, or options.

Our Savings Accounts

Account Type 1

Feature 1

Quisque non blandit ipsum, vel convallis justo. Quisque eget convallis urna, sit amet lacinia quam. Praesent sollicitudin, nisl eu euismod consectetur.

Feature 2

Convallis urna, sit amet lacinia quam. Praesent sollicitudin, nisl eu euismod consectetur.

Feature 3

Quisque non blandit ipsum, vel convallis justo. Quisque eget convallis urna, sit amet lacinia quam. Praesent sollicitudin, nisl eu euismod consectetur. Praesent bibendum cursus enim id consectetur.

Open An Account > Compare >