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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    Text headings and brief descriptions for each card.

cards example

Play Module

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires high quality graphics and content for each card.

  • Required Text

    Text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    Text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires high quality graphics and content for each card.

  • Required Text

    Text headings and brief descriptions and callouts for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires high quality images and content for each card and a high quality background image.

  • Required Text

    Band heading and description as well as text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card, an icon for the band and a high quality background image.

  • Required Text

    Band heading as well as text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    Text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires high quality graphics or images and content for each card as well as a high quality background image.

  • Required Text

    Text headings for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    “Text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires high quality graphics or images and content for each card.

  • Required Text

    Band heading as well as text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography, high quality images and content for each card.

  • Required Text

    Text headings for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens. They are simplified to be static with no hover animation.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires high quality images and content for each card and a high quality background image.

  • Required Text

    Band heading and description as well as text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    Text headings and brief descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    Band heading as well as text headings and descriptions for each card.

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.

Criteria

  • SEO

    The text in the cards could include keywords necessary for on-page SEO.

  • Responsiveness

    Cards scale and stack for smaller screens.

  • Cost / Complexity

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eaque pariatur mollitia distinctio et, minus delectus vel sed, vero sint quam, possimus fugit illo provident facilis. Vero, alias? Sint, tempore!

  • Required Assets

    Requires iconography and content for each card.

  • Required Text

    Text headings and descriptions for each card.

cards example

Request More Information

  • I am interested in