The Kitchen Sink

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.

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

Blog Boxes

The boxes in the grid below represent blog content. They are a variation on the boxes above, but shift the primary content to the bottom of the box and displaying the blog post's category. Optionally, if the box is a "basic" style you can opt to highlight some teaser copy.

People Boxes

These boxes represent key team members.

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.

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.

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.

Tables

The item below represents a styled table.

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
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France

Highlights

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