Card

A contained surface for grouping related content with configurable elevation and padding.

Overview

• Use elevated for primary content cards that need visual prominence.
• Use outlined when a clear boundary is needed without adding depth.
• Use filled for secondary areas or nested content regions.
• Adjust padding to match the density requirements of the content inside.

Accessibility

• Card renders as a <div> with no implicit role. Add semantic structure to its content (headings, lists) to aid navigation.
• If a card acts as a clickable region, use a <button> or <a> inside rather than attaching click handlers to the card itself.

Import

import { Card } from "@cocso-ui/react";

Default

Variant

API Reference

Card