We should provide a callout card component for emphasizing content

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.