Please refer to https://www.drupal.org/node/3446052 →
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.
<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 / Talking points:
Shema: Should SDCs morph dynamically based on data? Example put as many optional "fields" where data can be printed if present, but won't break the layout if it is 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.
Does SDC support nesting other components?
Active
Code
Card presented as SDC in Umami
https://git.drupalcode.org/project/drupal/-/tree/11.x/core/profiles/demo...
It is fully BEM powered and uses slots.
These should support both manually entered fields but also drawing fields from a node where the link, title, teaser etc is centrally managed