Cards

[Courtny]

Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action.

[btelnes]

Hi Courtny. There's a new card design for Profile S2E1 features which we don't currently support in our existing cards. It contains a new header, etc. I was told that we should only add things after a solid design review. Will Bjorn stated that if the feature is past feature design it should be kicked back to feature design or it should use a component we currently have. Has the Profile S2E1 design previously been reviewed and approved? If not, why was it provided to us?

[Courtny]

Thanks for bringing this to attention. Per the Teams thread, I will summarize the discussion we had for the greater design system improvements but it looks like your immediate work is unblocked.

[Courtny]

Conversation Summary - May 17 2021 - Profile S2E1

Engineering and design discussed in a Teams channel the impact of incoming work which exposed card inconsistencies. The team identified the following challenges:

There were two different conversations:

1. The layout of cards (the pattern of how they're composed), this is where a modified grid or card-list would come into play
2. The innards of the card, how a horizontal card looks and the list of possible things that can be placed on it.

We are more focused on the latter with much of this discussion. Per Will Bjorn: the former (#190) is not very hard.

[wibjorn]

@Courtny Regarding 2, If this pattern is going to continue to be common place, we should prioritize this when we get to more patterns.

For number 1, I think this should be our goal (we are already partly there): to come up with a finite list of acceptable inner elements that can be added within a card. We would want all combinations of these list of inner components to work well together. Card itself is a relatively simple thing - at its core its just a box with an optional header and footer. Here are a list of things that our cards currently support. Everything here is additive, meaning any combination of these should work.

Standard card

• header
  • icon
  • background color
  • a tag (often this is xp)
• body
  • heading
  • metadata
  • summary text
  • tags
  • nearly block level element
• footer
  • right / left alignment
  • button
  • icon buttons

[wibjorn]

For reference:

Cards

• cards
• cards, examples of their usage on learn
  A separate but similar component at least in the old system.
• media-card

[Courtny]

Adding a note here for future reference. Kurtis posed a good question:

Q: What do you call all of the contents that would go in a card that are displayed without a container?

Answer: Consider "Pane", "Panel", "Chunk", or "Board". Alternately, I know in newspaper layouts the term "Skyboxes", or "Boxcars" is used for just this thing.

General consensus warmed around Boxcar, but no decision was made.