Cards

Module One

Cards with Icons

This option represents a standard card design with a header at the top, graphic in the middle and text and link at the bottom.

cards example

Module Two

Cards with Logos

Another common card format with the graphic at the top, header and text in the middle and link at the bottom.

cards example

Module Three

Explainer Cards

These particular cards are smaller on the page and have the header at the top, graphic in the middle, text at the bottom, and the entire card acting as the link.

cards example

Module Four

Comparative Cards

Often used to compare two products, these large cards highlight a lot of information with a header, sub-header and text at the top, image in the middle, link at the bottom, and additional callouts throughout.

cards example

Module Five

Cards with Images

This is another approach to a card format with the entire card acting as the link, but with the cards overlaid on a band with a background image.

cards example

Module Six

Standard Cards 1

With a background image to anchor them in place, these cards represent another approach to a common card format with a pop-out hover animation.

cards example

Module Seven

Standard Cards 2

Another example of a standard card with a pop-out hover animation and overlapped with a header video.

cards example

Module Eight

Tilting Cards

These cards are unique in that they only have a header, image and button and they tilt depending on where you hover over them, making them more engaging.

cards example

Module Nine

Cards With Icons 2

With the header serving as the button and a subtle hover animation, these cards offer a simple way to introduce a lot of information.

cards example

Module Ten

Cards with Images 2

This setup uses cards to call out specific news and promotions that the company wants to emphasize to its customers.

cards example

Module Eleven

Simplistic Cards

Another approach to introducing a lot of information in a simplistic way, with the header and icon overlaying the background image.

cards example

Module Twelve

Cards With Images 3

Another version of a standard card with the image at the top, header in the middle and text and link at the bottom.

cards example

Module Thirteen

Cards With Icons

These particular cards don’t link to another section of the website, but instead simply bring attention to the specific information that they display.

cards example

Module Fourteen

Invisible Cards

This option presents the information as a block of text that reveals the card with a pop-out effect when you hover over the text.

cards example

Module Fifteen

Explainer Cards 2

Often used to explain multiple steps in a process, these cards are large and text heavy to entice the reader to find out more about a specific step.

cards example

Request More Information

  • I am interested in