Card(s)

[jaredcwhite]

We have a slew of card-like things in the system now, many of them in the Blocks category.

• Action Block: https://dev-storybook-bloom.netlify.app/?path=/docs/blocks-action-block--block-with-icon
• Dash Blocks: https://dev-storybook-bloom.netlify.app/?path=/docs/blocks-dash-blocks--with-two-blocks
• Image Card: https://dev-storybook-bloom.netlify.app/?path=/story/blocks-image-card--image (this sort of feels like its own thing though)
• Media Card: https://dev-storybook-bloom.netlify.app/?path=/story/blocks-media-card--with-title-and-subtitle
• Standard Card: https://dev-storybook-bloom.netlify.app/?path=/story/blocks-standard-card--blank
• Info Card (grid): https://dev-storybook-bloom.netlify.app/?path=/story/sections-info-card-grid--three-cards
• Form Card: (no story available) - noted 10/14

And then we're building a new card:
#2938

Can we map out a roadmap towards consolidating at least some of these around a more flexible generic card/container? I'm not sure how I would even document when to use one component or the other in any given context.

[jaredcwhite]

Some common (all optional depending on context) elements between most of these card-like presentations:

• Icon
• Title
• Subtitle / Content
• Action Button(s)
• Additional Footer?
• Border/padding/background variations

Action Block is interesting in that it has an "inline" mode where the icon, title, and action(s) flow from left to right.

[jaredcwhite]

Prior art for "card" components:

• Shoelace Card
• Flowbite Card
• Bootstrap 5 Card
• Adobe Spectrum Card
• Semantic UI Card & Item (I found it interesting these are two similar-ish yet different takes on the concept)
• USWDS Card

[slowbot]

@jaredcwhite

Media Card, Info Card

• these feel the most straight forward was using the same base card component
• they show a summary of content and are shown as a collection of items

Standard Card

• this visually matches but could be show by itself and not a collection
• I am also not sure if this is a summary of content but the content itself
• I do think it could fold into a basic card

Action Block, Dash Block

• these have always for me fallen more into a bucket of calls to action rather than a summary of content
• the inline treatment could be an extension of a flag layout

Image Card

• its own think, can be renamed block

[jaredcwhite]

While implementing the new generic Card component (issue #2938), one of the experiments I did was to loop through the React component children and inspect "types" of a sort in order to implement slotted children (see commit: 2646fd0#diff-828712ec2b840f181174f069ade08a16e14bd2af0885a6c30620dc336204e1bb). Some additional description here: #3043 (comment)

Ultimately we decided to go with a simpler approach, where Card subcomponents just render normally as React children and there isn't any internal slot structure. Perhaps in the future if we need to we can revisit this.