4.x - Create a card component

[pyrello]

Motivation

Create a card component to handle what we were using the card for in 3.x.

Proposed solution

How are we going to reference different card sub elements (media, title, details, etc.) style-choices?
Elements

• Media - The media options are going to be handled via .media-- classes.
  • Size
  • Shape/ Aspect Ratio
  • Outline
• Title
• 4.x - Move card details related classes to text utilities #708 - We are going to handle this in a follow-up issue.
• Body
• Footer/Actions

Options

• Outline
• Stacked/Alignment
  • change the orientation of the default card, without the stacked class, to be horizontal.
• Content alignment
• Background
• 4.x - Add card button alignment options #709 - We are going to handle this in a follow-up issue.

[pyrello]

This article is the origin of the media object concept, which is the inspiration for the card component in UIDS (and HDS before that): http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

We also had a fair amount of review of existing component libraries and discussion around the decisions we made about how to structure them, but that was all lost when the HDS repo was removed :(

[pyrello]

I think when we built the original card, we used Material Design as a bit of an inspiration. They have a new version now: https://m3.material.io/components/cards/overview

Here is the original: https://material.io/components/cards

[bspeare]

Here is one change I would be interested in making in 4.x.

• Change card--enclosed to a general utility class that can be used on other components? See As a site editor, I can add background color, border, and remove style options to the Blockquote block uiowa#5179 for why this might be useful.
  • This could also come in handy for Use cards for icon list brand-icon-browser#6

[pyrello]

Change card--enclosed to a general utility class that can be used on other components?

Dropping this here for reference: https://getbootstrap.com/docs/5.2/components/card/#border. Bootstrap's cards have borders by default and don't seem to have a way to turn them off without overriding their styles, so this is not exactly the model we want to be following, but using a mixin to add border style options is something we could figure out how to do.

(edit) Here is the section in the MD V3 guide on cards about the outline card: https://m3.material.io/components/cards/specs#9ad208b3-3d37-475c-a0eb-68cf845718f8 What I thought was interesting about this was the option to have a fill color and an outline. This is kind of similar to how we are doing buttons.

[briand44]

Sean can share what work has been started with whoever takes this on.

[briand44]

could be a good issue to pair/swarm

[pyrello]

Here are a couple changes that were suggested during conversation on Friday:

• Move any .card__title styles to .card .headline.
• Move and rename .card__subtitle and .card__meta to be text style utility classes, possibly prefixed with .text--.

[GaryRidgway]

Capturing from our conversation about a path forward to get this first draft to a state we feel comfortable leaving it in.

• Clean up sass file
• Collision for media padded and borderless, used in combo media padding doesn’t do anything.
• Media padded on L/R align is not working.

[bspeare]

Should we close this issue and create follow-up issues?

[pyrello]

Yes.