Card

Semantics

• Renders `Root`, `Header`, `Content`, and `Footer` as `<div>` elements with `data-scope="card"` and corresponding `data-part` attributes.
• Renders `Title` as an `<h3>` heading element, providing document outline structure.
• Renders `Description` as a `<p>` paragraph element.
• All parts carry `data-scope="card"` and `data-part="*"` attributes for identification.

Consumer responsibilities

• Use Card to group logically related content and actions.
• Ensure `Title` text is descriptive and meaningful for screen reader users.
• If the card wraps a link or button, apply appropriate ARIA roles or semantic HTML to the interactive element inside `Content`.
• Do not nest interactive elements directly on `Root`; place them within `Content` or `Footer`.

Not applicable

keyboard

Card is a non-interactive container element with no keyboard interactions.

focus

Card is a non-interactive container element and does not receive focus.

aria

Card relies on semantic HTML elements (h3, p) for accessibility and does not require additional ARIA attributes.