Card — Sinapse Design System

Variantes

no-border para conteúdo flat. outline (default) com borda. elevated com sombra.

No border

Outline

Elevated

<Card variant="no-border">No border</Card>
<Card variant="outline">Outline</Card>
<Card variant="elevated">Elevated</Card>

<template>
<div class="rounded-card bg-background">No border</div>
<div class="itps-card">Outline</div>
<div class="itps-card itps-card--elevated">Elevated</div>
</template>

export function Variants() {
return (
  <>
    <div className="rounded-card bg-background">No border</div>
    <div className="itps-card">Outline</div>
    <div className="itps-card itps-card--elevated">Elevated</div>
  </>
);
}

<div class="rounded-card bg-background">No border</div>
<div class="itps-card">Outline</div>
<div class="itps-card itps-card--elevated">Elevated</div>

Interativo

interactive adiciona hover coral + foco. Combine com href para virar link clicável inteiro.

Pacientes ativos

128 em atendimento agora

<Card interactive href="#">
<h3 class="text-lg font-semibold text-default">Pacientes ativos</h3>
<p class="text-sm text-subtle">128 em atendimento agora</p>
</Card>

<template>
<a href="#" class="itps-card cursor-pointer transition-colors hover:bg-primary-100 hover:border-primary-200 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none">
  <h3 class="text-lg font-semibold text-foreground">Pacientes ativos</h3>
  <p class="text-sm text-muted-foreground">128 em atendimento agora</p>
</a>
</template>

export function Interactive() {
return (
  <a
    href="#"
    className="itps-card cursor-pointer transition-colors hover:bg-primary-100 hover:border-primary-200 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
  >
    <h3 className="text-lg font-semibold text-foreground">Pacientes ativos</h3>
    <p className="text-sm text-muted-foreground">128 em atendimento agora</p>
  </a>
);
}

<a href="#" class="itps-card cursor-pointer transition-colors hover:bg-primary-100 hover:border-primary-200 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none">
<h3 class="text-lg font-semibold text-foreground">Pacientes ativos</h3>
<p class="text-sm text-muted-foreground">128 em atendimento agora</p>
</a>

Composição livre

Card é só um container — slot livre. Compose com Tag, Button, Avatar, Chip à vontade.

Relatório mensal

Maio 2026

Pronto

<Card variant="elevated">
<div class="flex items-start justify-between gap-4">
  <div>
    <h3 class="text-lg font-semibold text-default">Relatório mensal</h3>
    <p class="mt-1 text-sm text-subtle">Maio 2026</p>
  </div>
  <span class="itps-chip itps-chip--success">Pronto</span>
</div>
</Card>

<template>
<div class="itps-card itps-card--elevated">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h3 class="text-lg font-semibold text-foreground">Relatório mensal</h3>
      <p class="mt-1 text-sm text-muted-foreground">Maio 2026</p>
    </div>
    <span class="itps-chip itps-chip--success">Pronto</span>
  </div>
</div>
</template>

export function ReportCard() {
return (
  <div className="itps-card itps-card--elevated">
    <div className="flex items-start justify-between gap-4">
      <div>
        <h3 className="text-lg font-semibold text-foreground">Relatório mensal</h3>
        <p className="mt-1 text-sm text-muted-foreground">Maio 2026</p>
      </div>
      <span className="itps-chip itps-chip--success">Pronto</span>
    </div>
  </div>
);
}

<div class="itps-card itps-card--elevated">
<div class="flex items-start justify-between gap-4">
  <div>
    <h3 class="text-lg font-semibold text-foreground">Relatório mensal</h3>
    <p class="mt-1 text-sm text-muted-foreground">Maio 2026</p>
  </div>
  <span class="itps-chip itps-chip--success">Pronto</span>
</div>
</div>

Props

Prop	Tipo	Default	Descrição
`variant`	`'no-border' \| 'outline' \| 'elevated'`	`'outline'`	Estilo visual.
`interactive`	`boolean`	`false`	Hover/focus visíveis + cursor.
`href`	`string`	—	Vira `<a>` quando presente.
`class`	`string`	—	Classes adicionais.