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

Created on 8 May 2024, 8 months ago
Updated 2 July 2024, 6 months ago

Please refer to ๐ŸŒฑ [PP-1] Create components for a default design system Postponed

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?

๐Ÿ“Œ Task
Status

Postponed

Component

Theme builder

Created by

๐Ÿ‡ฒ๐Ÿ‡ฝMexico rmontero CMDX

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024