Componente

CmCard

Superfícies flexíveis para dashboards, perfis, planos e conteúdo destacado.

Import

Caminho público recomendado para este componente.

import { CmCard, CmBadge, CmButton, CmGridContainer, CmProgress, CmRow, CmCol, CmText } from "cosmemilton-ui";

CmCard agora oferece variant, tone, accent e interactive para criar superfícies mais ricas sem CSS externo.

Use padding="none" quando o card tiver capa, mídia ou blocos internos com espaçamento próprio.

Combine CmCard com CmRow, CmCol, CmText, CmBadge e CmButton para compor cards de produto, métricas, perfil e planos.

Métricas com acento

Use tone, accent e interactive para cards de dashboard que respondem ao tema atual.

Receita mensal

R$ 42.800

+12%

meta de 55k

Chamados resolvidos

186

SLA 98%

Pendentes

14

Perfil com capa

Use cover para criar capa com o próprio token do card. O conteúdo continua usando padding do CmCard.

MS

Marina Souza

Coordenação pedagógica

Ativa42 turmasNPS 92

Planos e escolhas

variant="outline" e variant="soft" ajudam a hierarquizar opções lado a lado.

Essencial

Para times em validação.

Atual

R$ 89/mês

Componentes base

Tema customizado

Pro

Para operação completa.

Popular

R$ 189/mês

Todos os componentes

Dashboards e relatórios