[Card – Pictogram] Pictogram placement and body reveal

[RichKummer]

We need to add website guidance to encourage using the bottom alignment (pattern guidance). The option to toggle between top and bottom alignment will stay in v2.

We should also review the body copy reveal on hover to see if there are accessibility or interaction concerns. Add border to bring in line with card updates for v2.

Guidance updates

• Update website language to encourage bottom alignment.
• Review website changes with Jeannie, Olivia, and Rich
• Deploy website guidance changes – #1555
• Add description in Figma kit to encourage bottom alignment (make the default)
• Add dev story to update default to bottom alignment, if needed – [card – pictogram]: Add default for bottom alignment #10195

Body copy reveal

• Review body copy reveal
• Review body copy reveal with Jeannie, Olivia, and Rich
• Update design specs
• Add v2 dev story for hover reveal change – [Component] Card – pictogram v2 updates #10199
• Add Figma kit story – [Figma] Card – pictogram v2 updates for border and hover #10201

[RichKummer]

Discussion with a11y notes

• Border added to card globally should help indicate that the card – pictogram is interactive
• Pictogram is needed by card – pictogram, it cannot be removed
• Mobile displays all info in overflow version. Should this replace card – pictogram's hover interaction, or be an added variant?

[RichKummer]

Design crit 03/02/23

• Gower's feedback for the hover reveal was that users may miss the title when focusing. Someone using a zoom feature in their browser may also miss the title as it animates away while the cursor is passing over the card.
• In a group, the hover might be chaotic with some content appearing/disappearing.
• Body copy should be optional, and resize the button down to an aspect ratio.
• We should remove the hover reveal, and instead display all content without hiding behind a hover. This makes the card – pictogram more accessible and ensure they can see the most important takeaways in a single view.