Card options

Regardless of which type of card you design, all projects must include the following:

  • Title
  • Image

Additional details and requirements are listed based on card type:

Article

This card format is used to summarize/promote an article on a magazine, news or blog site.

Requirements

In addition to a title and image, this card must include the following:

  • Author’s name
  • Read more link

Your design should also include at least two of the following elements:

  • Date/time posted
  • Tags or a section/category for the article
  • Short preview of the article text
  • Number of comments
  • Link(s) to fave, bookmark and/or share

Examples

See the Pen News Cards - CSS only by Aleksandar Čugurović (@choogoor) on CodePen.

See the Pen Card Article UI by Mithicher (@mithicher) on CodePen.

See the Pen Blog Card by Katherine Kato (@kathykato) on CodePen.

Recipe

This card format is used to summarize/promote a recipe for users to cook.

Requirements

In addition to a title and image, this card must include the following:

  • Time to cook
  • Servings
  • Read more link

Your design should also include at least two of the following elements:

  • Ingredients used
  • Nutrition info
  • Tags or a section/category for the recipe
  • Number of comments
  • Link(s) to fave, bookmark and/or share

Examples

See the Pen Salmon recipe card by Eric Czyzycki (@czyzycki) on CodePen.

See the Pen Recipe Card by Kevin Lesht (@klesht) on CodePen.

See the Pen Day009 by Fx Costanzo (@Kingeek) on CodePen.

Movie

This card format is used to display details about a movie.

Requirements

In addition to a title and image, this card must include the following:

  • Rating (PG, R, etc.)
  • Play link (could be for full movie or just trailer)

Your design should also include at least two of the following elements:

  • User rating (e.g., stars, IMDB)
  • Year
  • Genre(s)
  • Length
  • Cast, etc. info
  • Short description
  • Link(s) to fave, bookmark and/or share

Examples

See the Pen Responsive movie card by Ryan (@ryanparag) on CodePen.

See the Pen JS Movie Database by Cheryl Codes (@cheryl-codes) on CodePen.

Product

This card format is used to summarize details of a product on a shopping site.

Requirements

In addition to a title and image, this card must include the following:

  • Price
  • Link to purchase/add to cart

Your design should also include at least two of the following elements:

  • Description and/or features
  • Options, such as size or color
  • User ratings and/or number of user reviews
  • A discounted/sale price
  • Link(s) to fave, bookmark and/or share
  • Link to more info about the product

Examples

See the Pen Material design Product Card by loiff (@loiff89) on CodePen.

See the Pen Simple Product Card by Ethan Thompson (@ethanthompson) on CodePen.

See the Pen #1418 - Product Card by LittleSnippets.net (@littlesnippets) on CodePen.