A card is a linked, interactive surface that groups related information and/or actions associated with a singular subject or destination.
CdrCard is a simple wrapper component that allows for composing various card layouts.
Cards should always be used to link to other content, and the
cdr-card__link utility class should be used on the link element to ensure that the entire card functions as a click target.
Because CdrCard is a simple wrapper component, it's behavior can be customized or overridden in a variety of ways. For example, adding a border, inset padding, or modifying the link behavior.
Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:
articleif the content includes a heading AND the content would be as useful on another web page
sectionif the content contains a heading, but the content is dependent on its context to be meaningful
divif your card title won’t be using a heading tag. This ensures it will not appear in the document’s outline
Sets valid HTML container element tag.
Find more information about using Slots in the article Getting Started as a Developer.
Slot for CdrCard content.