Icon Card


Icon Card Intent and Usage

Icon Cards are used as gateways to sections of content that can be well-represented with a simple title and icon. They are best in a group using similarly styled icons. They use simplified information primarily suited for navigation to content by category or other grouping.


Icon Card Design Guidelines

  • Icon cards are intentionally simple, offering fewer fields than regular cards, so as to create a high level of consistency between the icon cards. 
  • For further simplicity it is important to use similarly styled icons across the site and especially within a grouping of icon cards. Recommended icon styles are solid, single color, moderately detailed and realistic (rather than cartoon-like).

Icon Card Editorial Guidelines

  • Use short titles as card titles. 
  • Use consistent .svg files for icons — see above Design Guidelines for recommended icon styles. The use of .svg enables the programmatic coloring of the entire element on hover, which is important for the user experience and accessibility.
  • Use single-column, full-width sections on the page for icon cards primarily.

Icon Cards on the MDC Website

Icon cards are used on only a few pages on the MDC website.