[later phase] Card component (Default component library for the experience builder)

Please refer to #3446052: [later phase] Create components for a default design system

Card component definition

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Variants

Markup (TBD)

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <span class="card-eyebrow">New!</h5>
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Discussion and talking points

Schema

Should SDCs morph dynamically based on data?

Example: Put as many optional "fields" where data can be printed if present, but these won't break the layout if any are missing.

Nesting components

Scenario: A call to action can look like a link, can be underlined or not, can look like a button, can have an icon, etc.

Does SDC support nesting other components?