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

This is the
headline
Dolor sit amet, lariat consectetuer adipiscing elit. Perus commodo ligula eget dolor.
Learn more >This is the
headline
This is a quick test of the description here. How long can we gooooooo?
Learn more >
Evans Bancorp net income increases 8% to a record $5.2 million in the 2019 third quarter
Read more >Evans Bancorp net income increases 8% to a record $5.2 million in the 2019 third quarter
Read 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.
Another piece of content
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.
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Königlich Essen | Philip Cramer | Germany |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
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.
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.
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

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

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

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.
Account Type 2
Quisque non blandit ipsum, vel convallis justo. Quisque eget convallis urna, sit amet lacinia quam. Praesent sollicitudin, nisl eu euismod consectetur.
Learn More >Convallis urna, sit amet lacinia quam. Praesent sollicitudin, nisl eu euismod consectetur.
Learn More >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.
Learn More >