Cards - Pattern update

[GnatalieH]

Feature Request

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

This update is for:

• [ ] Content styleguide
• [x] Component
• [x] Pattern
• [ ] Utility
• [ ] Other

What is the name

Cards - Pattern

What is the nature of this update?

• [x] How to build this component/pattern
• [x] When to use this component/pattern
• [x] When to use something else
• [x] Usability guidance
• [x] Accessibility
• [ ] Implementation
• [ ] Research insights
• [ ] Package information

Additional Context

Update draft of Cards based on feedback from Design System Council on 12/10/21. This includes creating wireframe/minified examples of Status card, Promo card, and Appointment card.

[GnatalieH]

Updated draft of Cards is ready for review.

[humancompanion-usds]

This isn't published yet so reopening.

[humancompanion-usds]

This blocks issue #644. I'd like us to define the variations of Card that we're going to document as components. The ask in #644 is create a web-component that would produce some variations. @GnatalieH - I think you had done this somewhere and now I can't find it again. I recall seeing a list of 2-3 variations of Cards perhaps in a Sketch file.

[caw310]

@humancompanion-usds , here is a link to the draft for you to review and sign off. https://design.va.gov/patterns/cards

@GnatalieH please include link to Sketch file.

[GnatalieH]

@humancompanion-usds here is a link to a Sketch file I started a few months ago where I began mocking up some designs for a Card component. At the time, Ryan wasn't overly concerned with including image thumbnails in cards, although our "promo" card uses an image. But, that's why my designs don't include an image thumbnail version.

[humancompanion-usds]

@GnatalieH - Good work! The Example cards for status and appointment are great variations to get into the system. I think the anatomy of a Card that you did is great and you probably did more than is necessary with all of the annotated versions. We may not need all of those for the documentation.

Now looking at this again I'm leaning toward making this a Component rather than a Pattern. While there are lots of variations we should enumerate them as you have done here and capture them into the system. This Experimental Pattern seems like a likely candidate that we could update to talk about how to use the Card components in certain contexts and to use actual examples rather than illustrative fake content examples: https://design.va.gov/experimental-design/authenticated-info-list

So action items:

• Move from Patterns to Components
• Add examples that you have in the Sketch file for Status and Appointment
• Add a bit more Usage details around each variation. For example, I'd like to specify the action links that should be used (primary, secondary), header sizes, etc.
• Queue up work to get those into Storybook and discuss with team whether we want a web-component for Card or not

[humancompanion-usds]

Some requests that came up during our research sessions with designers:

• Detail the spacing between cards should multiple cards appear together in a list or grid.
• In terms of usage, detail that cards should not be used for search results (the request was for detailing search results but that reminded me that sometimes folks reach for a card for each search result which is an anti-pattern).

[caw310]

Linking to an old request for Card pattern from 2020. https://app.zenhub.com/workspaces/design-system-council-backlog-629783f797297600151c16b5/issues/department-of-veterans-affairs/vets-design-system-documentation/256

[humancompanion-usds]

We have shipped Card! Happy day. https://design.va.gov/components/card

Sketch is also updated and gets a "starred" release today.