Card beta

A card is a container that holds information and actions related to a single concept or object.

Heading

To add a heading to the card, you can use the heading attribute.

<ch-card heading="Card Heading"></ch-card>

Subheading

The subheading attribute adds a subheading to the card.

<ch-card heading="Card Heading" subheading="The card subheading"></ch-card>

Media position

The position of media in the card can be controlled by the media-position attribute, either top, bottom, start, or end. The

<ch-card media-position="bottom" heading="Heading" subheading="Subheading">
  <img
    slot="media"
    src="https://via.placeholder.com/100x100"
    width="100"
    height="100"
    alt="image alt text"
  />
  Content Slot
  <span slot="footer">Footer Slot</span>
</ch-card>

API