Camaleo
EN · PTGitHub
// preview in
saved for every page

Card

A box that groups one subject, like a plan, a project or a setting, with its title, content and actions. Use it when people compare or scan several of these side by side.

Pattern Static containerServer componentSource ↗

Installation

Set up Camaleo once (Installation), then import what you need. It renders on the server.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@camaleo/react";

Anatomy

A header with the title and a short description, the content, and a footer for actions. Use only the parts you need; every part has a data-slot you can target from CSS.

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

minimal · light · #3fa34d

September uptime

All regions, checked every minute.

99.98% uptime. One 9-minute outage on September 12, during the database upgrade.

Invite Rafael Souza

rafael.souza@acme.com

Rafael will be able to edit the 3 projects in this workspace. You can change this later.

With actions

Put the buttons in CardFooter, the main one last. People find them in the same place on every card.

How we cut checkout time by 40%

Case study · 6 min read

Fewer fields, saved addresses and one payment screen instead of three.

Payments

Whole card as a link

Click anywhere on the card. The link stays in the title, so screen readers hear a short name, and data-card-link on it stretches it over the card. Don't turn the card itself into a button.

Plan

Selectable cards

Click a card or use the arrow keys. Each card is a radio's label, so the whole card selects it, and the legend names the group.

Accessible forms in 5 steps

Labels, errors and focus order, with examples you can copy.

With a picture

A picture on top helps people recognize a guide or a product. If it only decorates, hide it with aria-hidden.

Open tickets

42

8 more than last week

Compact

Less padding for dashboard numbers. Keep the title: it is what names the number for everyone.

Invoices

No invoices yet

Your first invoice shows up here after the first payment, on November 5.

Nothing here yet

An empty card still shows its title, says why it is empty and offers the next step, instead of disappearing.

  • New checkout

    Ana Silva

    On track

  • Mobile app 3.0

    Rafael Souza

    At risk

  • Help center

    Juliana Costa

    Paused

Cards in a grid

A list of cards is a list: use ul and li, so screen readers say how many there are. The grid wraps on its own on phones.

In context

Cards hold one subject each. These are whole pieces of UI you can copy, in the skin you picked.

Team

$49 / month
  • Up to 20 people
  • Shared projects and comments
  • Admin roles and permissions
Pricing planCard · Button

Active subscriptions

14,820+18.4% vs last quarter
Dashboard numberCard · Badge · Link

Two-step verification

A second step when you sign in on a new device.

On: an authenticator app and 8 backup codes. Last used on October 21.

Security settingCard · Button

Guidelines

Team plan renewal

Renews on November 30.

20 seats, $49 a month. We charge the card ending in 4242.

DoUse the header and content parts.

They set the spacing and the title style, so the card looks right in every skin.

Team plan renewal
Renews on November 30.
20 seats, $49 a month. We charge the card ending in 4242.
Don’tPlain divs inside the card.

The title is no longer a heading, and the spacing breaks when people switch skins.

Team plan renewal

Renews on November 30.

20 seats, $49 a month. We charge the card ending in 4242.

DoSplit a card with a line.

A separator divides the content and keeps one box around one subject.

Team plan renewal

Renews on November 30.

Don’tA card inside a card.

Boxes inside boxes waste space on phones and make it unclear what belongs together.

Props

PropTypeDefaultDescription

Card and each part render plain HTML and take its attributes: Card, CardHeader, CardContent and CardFooter a <div>, CardTitle an <h3>, CardDescription a <p>.

Styling hooks

Restyle it without forking: target the slots, or set the tokens on a parent, a skin or the card itself.

Attributes

data-card-linkon the title link: stretches it over the card, which shows its focus ring

Tokens it reads

Color

--cml-border--cml-fg--cml-fg-muted--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-radius-surface--cml-surface-raised

Shape & size

--cml-border-width--cml-gap

Type & motion

--cml-font-display--cml-font-weight-display

This component only

--cml-card-border--cml-card-shadow--cml-corner-shape

Accessibility

TabMoves through the links, buttons and fields inside the card. The card itself never takes focus.
LinkThe link in the title of a clickable card.Empty stateWhat a card shows when there is nothing in it yet.StatOne number with its label and trend, for dashboard cards.
Was this page helpful? · Edit this page on GitHub