Card — Sinapse Design System

Relatorio mensal

Maio 2026

Pronto

Indicadores consolidados e liberados para revisao.

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

export function CardExample() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Relatorio mensal</CardTitle>
        <CardDescription>Maio 2026</CardDescription>
        <CardAction>
          <span className="text-sm font-medium text-primary">Pronto</span>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          Indicadores consolidados e liberados para revisao.
        </p>
      </CardContent>
      <CardFooter>
        <p className="text-xs text-muted-foreground">Atualizado hoje</p>
      </CardFooter>
    </Card>
  )
}

<script setup lang="ts">
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card class="w-[350px]">
    <CardHeader>
      <CardTitle>Relatorio mensal</CardTitle>
      <CardDescription>Maio 2026</CardDescription>
      <CardAction>
        <span class="text-sm font-medium text-primary">Pronto</span>
      </CardAction>
    </CardHeader>
    <CardContent>
      <p class="text-sm text-muted-foreground">
        Indicadores consolidados e liberados para revisao.
      </p>
    </CardContent>
    <CardFooter>
      <p class="text-xs text-muted-foreground">Atualizado hoje</p>
    </CardFooter>
  </Card>
</template>

<div class="itps-card">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h3 class="text-lg font-semibold text-foreground">Relatorio mensal</h3>
      <p class="mt-1 text-sm text-muted-foreground">Maio 2026</p>
    </div>
    <span class="itps-tag itps-tag--success itps-tag--sm">Pronto</span>
  </div>
  <p class="mt-4 text-sm text-muted-foreground">
    Indicadores consolidados e liberados para revisao.
  </p>
</div>

Instalação

Instale Card da sua stack e rode o comando individual ITpS em seguida. O comando itps add card é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add card
pnpm dlx github:ITPS/sinapse-ui-cli add card

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add card
pnpm dlx github:ITPS/sinapse-ui-cli add card

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use Card e seus compostos para estruturar cabeçalho, conteúdo, ações e rodapé. A composição deixa claro onde ficam título, descrição e ação.

Para HTML ou wrappers finos, use itps-card quando precisar de uma superfície neutra copy-first. Card não cria hierarquia interna; use heading, texto, Tag, Avatar ou Button conforme o conteúdo exigir.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Container	`Card`	`itps-card`
Cabeçalho	`CardHeader`	layout interno livre
Título	`CardTitle`	heading sem classe obrigatória
Descrição	`CardDescription`	texto de apoio
Ação	`CardAction`	Button, Link ou Tag conforme o caso
Conteúdo	`CardContent`	corpo do card
Rodapé	`CardFooter`	bloco final opcional

Variantes

Use a variante base para superfície com borda. itps-card--elevated adiciona sombra; itps-card--flat remove a borda visual e o padding para encaixar o conteúdo em layouts densos.

Flat

Outline

Elevated

<div class="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
  <div class="itps-card itps-card--flat">
    <span class="text-sm text-foreground">Flat</span>
  </div>

  <div class="itps-card">
    <span class="text-sm text-foreground">Outline</span>
  </div>

  <div class="itps-card itps-card--elevated">
    <span class="text-sm text-foreground">Elevated</span>
  </div>
</div>

API copy-first

Classe	Uso
`itps-card`	Superfície base com borda, fundo `card` e padding.
`itps-card--elevated`	Card com sombra para destaque moderado.
`itps-card--flat`	Remove borda visual e padding para composição interna.

Acessibilidade

Use <div> para agrupamento visual sem ação. Quando o bloco inteiro precisar navegar, prefira Feature Card ou um Link claro dentro do conteúdo. Evite colocar vários controles primários dentro de um card pequeno; isso torna a varredura e o foco mais difíceis.