We should provide a callout card component for emphasizing content

[mxmason]

What is it?

Callout cards use visual affordances (like borders, lead words, or other shapes) to indicate that a pierce of content is important. The effect usually results in the content appearing as if it is a card laid on top of the site. Importantly, there are no HTML elements or ARIA attributes to indicate that content needs emphasis. Callout cards must rely on content and visual affordance – ideally, both.

What we have now

The closest thing The A11Y Project has to a callout card is our visual design for a blockquote.

This does not work as a callout card, because its visual affordances (and underlying semantics) invoke the concept of a quote. Content callouts are not quotes.

Some callout card concepts in the wild

CSS tricks draws a 3-sided orange border around its callout cards, and introduces their content with "Hey!".

Shopify's Polaris framework uses a four-sided card, as well as images, to draw reader attention.

[MicheleAWilliams-A11y]

For me, it'll be important to distinguish "Examples" (as in, this is how you perform this) from "TL;DR" (as in, if you won't read this paragraph, at least read this bullet point) from "quotables" for social media (as in, put this on Twitter for clickbait material). Notably, none of these are "block quote" (as in poignant words from an author). Am I taking this too far?