A contact card collection is a set of contact cards arranged in a collection with an optional overarching heading and description, effectively creating a static directory. Contact card collections display a small group of manually curated contact cards and are ideal for showing a specific grouping of people, such as the members of a specific office or team.

Contact card collections come in two varieties:

Both variations have the ability to feature the first contact card to make it more visually prominent. This can be especially helpful for highlighting leadership roles. You can also list administrative contacts as part of these cards.

If you are looking to have a comprehensive, filterable and searchable list of people, consider using the directory component. Directories are powered by profiles and will list everyone with a profile.

Contact Card Collection Option A

Option A is our original contact card design that matches the profile headers. This simpler design can be useful for consistency between contact cards, directories and profiles.

Full Contact Card Collection Option A Documentation

Example Contact Card Collection Option A

Customization

Within a contact card collection, you can optionally feature the first contact card to make it more visually prominent. This can be especially helpful for highlighting leadership roles.

Contact Card Collection Option B

Option B accommodates a wider range of image crops compared to Option A and supports the use of a biographical paragraph, if desired.

Full Contact Card Collection Option B Documentation

Example Contact Card Collection Option B

Customization

Within a contact card collection, you can optionally feature the first contact card to make it more visually prominent. This can be especially helpful for highlighting leadership roles. A three-column layout option is provided for a more compact display; if images are provided, they display above the main contact card info rather than out to the side.

Media Options

Media options must be consistent across a contact card collection. Contact cards have an optional image, displayed in varying aspect ratios:

  • Portrait (2:3)
  • Square (1:1)
  • Circle (1:1)
  • Landscape (2:3)

For all aspect ratios, images can be displayed at one of two sizes: large at the top of the card or smaller at the upper-right corner of the card. We recommend uploading images with a width of at least 700px if using the larger display option and a width of at least 400px for the smaller display option. Be mindful of loading times, and try to keep file size under 500kb.

Keep Learning

Learn about the Description List Collection in Aggie UX 101 Module 5 Chapter 7.

Go to Chapter 7