Card

import * as React from "react"
 
type PulsoCardProps = {
  title: string
  description?: string
  children: React.ReactNode
  footer?: React.ReactNode
  interactive?: boolean
}
 
export function PulsoCard({ title, description, children, footer, interactive = false }: PulsoCardProps) {
  return (
    <article
      data-interactive={interactive || undefined}
      className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--card)] data-[interactive=true]:transition-[border-color,box-shadow] data-[interactive=true]:duration-[var(--motion-duration-fast)] data-[interactive=true]:hover:border-[var(--border-strong)]"
    >
      <header className="border-b border-[var(--border)] p-4">
        <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}
      </header>
      <div className="p-4">{children}</div>
      {footer ? <footer className="border-t border-[var(--border)] p-4">{footer}</footer> : null}
    </article>
  )
}

<PulsoCard
  title="Configurações de notificação"
  description="Canais ativos para alertas de alta prioridade."
  footer={<button type="button">Salvar alterações</button>}
>
  <p>Email e Slack ativos para risco high e critical.</p>
</PulsoCard>

<article class="card">
  <header class="card__header">
    <h3>Configurações de notificação</h3>
    <p>Canais ativos para alertas de alta prioridade.</p>
  </header>
  <div class="card__content">
    <p>Email e Slack ativos para risco high e critical.</p>
  </div>
  <footer class="card__footer">
    <button type="button">Salvar alterações</button>
  </footer>
</article>

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
 
.card__header,
.card__content,
.card__footer {
  padding: var(--space-4);
}
 
.card__header,
.card__footer {
  border-block-color: var(--border);
}