Current state: cards on Chicago.gov
The CDS will eventually include a variety of card styles for different content types. Cards are helpful for displaying content across different screen sizes and for displaying varying amounts of content. Chicago.gov is already using cards for some announcements and key links on the homepage:
![current chicago.gov "additional information" cards](https://user-images.githubusercontent.com/26829620/64875348-89226980-d612-11e9-9010-77bccf460e17.png)
![current chicago.gov announcement cards on the home page](https://user-images.githubusercontent.com/26829620/64875359-94759500-d612-11e9-994b-bfb004fc611f.png)
Card principles
What is a card for?
A card is generally an entry point for a page (a link). Cards appear in card decks with other cards of the same category.
Here are some possible card categories based on current content of chicago.gov and other municipal websites:
- Announcement
- Featured content or resource
- Link to resource, guide, or information page
- Link to service or portal
- Link to action
- Person or team member
- News or event
Decision point: how should card design relate to the card category?
Cards will always be grouped by category. We need some visual way to note what category a card belongs to. There are two main ways of doing this:
- Each category is visually distinct, which might involve the shape, size, color, font, and layout of that card. (See Boston.gov case study below)
- Each category is distinguished by a color or icon. There are multiple card templates of different sizes, shapes, and layouts, and a category style (i.e. the color and icon) can be applied to any or multiple templates. (See Phila.gov case study below)
The CDS should aim to have the first type of card styles (visually distinct). However, the second option (distinguished by only color and iconography) may be easier for an initial version of development because it requires fewer designs.
Case study of Boston.gov card system: categories are visually distinct.
The Boston.gov website has, by my count, five categories of cards:
- Key actions
- News (cards associated with a date)
- Person
- Department
- Resources, guides, etc.
While the styles aren't perfectly visually consistent, there are obvious visual categories.
Key action cards
Characteristics: square, black iconography, blue italicized font.
![boston key action cards](https://user-images.githubusercontent.com/26829620/64818852-8f610900-d572-11e9-9ad9-2fd6483495e9.png)
News and date cards
Characteristics: Ribbon with date, image to left, blue heading with gray subheading.
![Boston news/date card](https://user-images.githubusercontent.com/26829620/64819142-36de3b80-d573-11e9-8634-da6124e16627.png)
Person cards
Characteristics: Circular image, "send an email" link, blue heading and gray subheading.
![Boston team member card](https://user-images.githubusercontent.com/26829620/64819208-5d9c7200-d573-11e9-89be-c3c3c90ee59e.png)
Department cards
Characteristics: department icon, white background, rectangular.
![Boston department cards](https://user-images.githubusercontent.com/26829620/64820232-90e00080-d575-11e9-88af-0af275ef4fae.png)
Resource and guide cards
The most varied card type. No icons unless calling out a document or external link. Optional image. Three-across grid.
![Boston miscellaneous resource cards](https://user-images.githubusercontent.com/26829620/64820360-d997b980-d575-11e9-9fcb-2cfe87c95c55.png)
Case study of Phila.gov card system: card color and iconography determines category and can be applied to any card "template."
The Phila.gov website has, by my count, six categories of cards:
- Announcement
- Press release
- Action guide
- Featured
- Post
- Event
These cards can take a variety of shapes and can occupy a variety of grid layouts. Cards are clustered by category, but size, shape, and layout of cards do not relate to the category.
Color-coding for different cards
![Philadelphia color-coding on cards](https://user-images.githubusercontent.com/26829620/64820504-27142680-d576-11e9-9dad-6505bfb06744.png)
Various layouts that cards may take
![Philadelphia card layouts](https://user-images.githubusercontent.com/26829620/64820626-66427780-d576-11e9-800d-74fe82712e61.png)