Skip to Content
ComponentsOrganismsCollapsible card

Collapsible Card

Organism

Collapsible Card preserva o resumo visível e permite revelar detalhe sem trocar de superfície.

Use para detalhes técnicos, configurações avançadas, evidências secundárias e logs compactos. Não esconda a consequência principal, risco crítico ou ação obrigatória dentro do conteúdo colapsado.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoCollapsibleCardProps = {
  title: string
  description?: string
  defaultOpen?: boolean
  children: React.ReactNode
}
 
export function PulsoCollapsibleCard({ title, description, defaultOpen = false, children }: PulsoCollapsibleCardProps) {
  const [open, setOpen] = React.useState(defaultOpen)
  const contentId = React.useId()
 
  return (
    <article className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--card)]">
      <header className="flex items-start justify-between gap-4 p-4">
        <div>
          <h3 className="text-base font-semibold text-[var(--fg-strong)]">{title}</h3>
          {description ? <p className="mt-1 text-sm text-[var(--fg-muted)]">{description}</p> : null}
        </div>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={contentId}
          onClick={() => setOpen((current) => !current)}
          className="rounded-[var(--radius-sm)] border border-[var(--border-strong)] px-3 py-2 text-sm"
        >
          {open ? "Ocultar" : "Mostrar"}
        </button>
      </header>
      {open ? <div id={contentId} className="border-t border-[var(--border)] p-4">{children}</div> : null}
    </article>
  )
}
<PulsoCollapsibleCard title="Evidências técnicas" description="Detalhes usados pela Cris para recomendar atenção." defaultOpen>
  <p>3 fontes primárias confirmadas e 2 menções em monitoramento.</p>
</PulsoCollapsibleCard>

Regras

  • Header precisa conter resumo suficiente para decidir abrir ou não.
  • Use aria-expanded e aria-controls no trigger.
  • Não esconda estados críticos ou ações obrigatórias.
  • Preserve motion suave, mas respeite prefers-reduced-motion.
Last updated on
TabsResponsive sheet