# Feature Card

Card de destaque para atalhos, CTAs de seção e chamadas de recurso.

> Documentação do Sinapse DS. Snippets shadcn usam os componentes do seu projeto (`@/components/ui/*`); snippets HTML usam as classes `itps-*` do CSS Sinapse (`/css/<versão>/`, veja `/comecar.md`). Componentes do site de documentação não fazem parte do DS.

- Categoria: Data Display
- Status: stable

## Em cada stack

- HTML e Astro: Classes `itps-*` do CSS Sinapse, com todas as variantes desta página.
- React e Vue: Componentes padrão do shadcn (`card`) com o tema Sinapse: cores, fonte e raio vêm do tema, e as variantes `itps-*` desta página existem só no HTML. O Button é o Sinapse.

**React/Next (shadcn/ui)**

```tsx
import { Button } from '@/components/ui/button'
import {
  Card,
  CardAction,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

export function FeatureCardExample() {
  return (
    <Card className="w-full max-w-xl">
      <CardHeader>
        <div>
          <CardTitle>Tokens</CardTitle>
          <CardDescription>
            Cores, tipografia, sombras e elevação documentadas como tokens.
          </CardDescription>
        </div>
        <CardAction>
          <Button asChild variant="itps" size="sm">
            <a href="/estilos/tokens">Abrir</a>
          </Button>
        </CardAction>
      </CardHeader>
    </Card>
  )
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

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

<template>
  <Card class="w-full max-w-xl">
    <CardHeader>
      <div>
        <CardTitle>Tokens</CardTitle>
        <CardDescription>
          Cores, tipografia, sombras e elevação documentadas como tokens.
        </CardDescription>
      </div>
      <CardAction>
        <Button as-child variant="itps" size="sm">
          <a href="/estilos/tokens">Abrir</a>
        </Button>
      </CardAction>
    </CardHeader>
  </Card>
</template>
```

**HTML (copy-first)**

```html
<div class="itps-feature-card">
  <div class="itps-feature-card__header">
    <h3 class="itps-feature-card__title">Tokens</h3>
    <i class="itps-feature-card__icon ti ti-palette" aria-hidden="true"></i>
  </div>
  <p class="itps-feature-card__description">
    Cores, tipografia, sombras e elevação documentadas como tokens.
  </p>
</div>
```

## Instalação

O comando instala o Card da sua stack e o Button Sinapse com o tema Sinapse. Configure o registry uma vez por projeto em [Comece por aqui](/comecar).

**terminal · React/Next**

```sh
pnpm dlx shadcn@latest add @sinapse/feature-card
```

**terminal · Vue 3/Nuxt 4**

```sh
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/feature-card.json
```

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

## Uso

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, use `Card` para a superfície e `Button asChild` para a ação. Isso deixa o destino explícito e evita depender de um comportamento de link no `Card` que não faz parte do contrato padrão do shadcn.

Para HTML ou wrappers finos, use `itps-feature-card`. Quando o card inteiro precisa navegar, renderize o próprio contêiner como `<a>` e não coloque botões ou outros links dentro dele.

## Exemplos

### Estrutura

| Peça | React/Next e Vue 3/Nuxt 4 | HTML |
|------|--------------------------|------|
| Superfície | `Card` | `itps-feature-card` |
| Cabeçalho | `CardHeader` | `itps-feature-card__header` |
| Título | `CardTitle` | `itps-feature-card__title` |
| Descrição | `CardDescription` | `itps-feature-card__description` |
| Ação | `CardAction` + `Button asChild` | `<a class="itps-feature-card">` |
| Ícone | composição visual | `itps-feature-card__icon` |

### Links

Use o modo `<a class="itps-feature-card">` quando a área inteira deve ser clicável. Para links externos, mantenha `target="_blank"`, `rel="noopener noreferrer"` e um ícone visual de saída.

**HTML (copy-first)**

```html
<div class="grid w-full gap-4 md:grid-cols-2">
  <a href="/componentes" class="itps-feature-card">
    <div class="itps-feature-card__header">
      <h3 class="itps-feature-card__title">Componentes</h3>
      <i class="itps-feature-card__icon ti ti-layout-grid" aria-hidden="true"></i>
    </div>
    <p class="itps-feature-card__description">
      Componentes prontos com variantes, estados e exemplos para copiar.
    </p>
  </a>

  <a href="https://www.itps.org.br/comunicacao/manual-de-identidade-visual-do-instituto-todos-pela-saude" target="_blank" rel="noopener noreferrer" class="itps-feature-card">
    <div class="itps-feature-card__header">
      <h3 class="itps-feature-card__title">Manual de identidade do ITpS</h3>
      <i class="itps-feature-card__icon ti ti-arrow-up-right" aria-hidden="true"></i>
    </div>
    <p class="itps-feature-card__description">
      Diretrizes de marca no site do ITpS.
    </p>
  </a>

  <a href="/comecar" class="itps-feature-card md:col-span-2">
    <div class="itps-feature-card__header">
      <h3 class="itps-feature-card__title">Copiar e validar</h3>
    </div>
    <p class="itps-feature-card__description">
      Importe o CSS, rode a validação visual e siga para a stack do produto.
    </p>
  </a>
</div>
```

## API copy-first

| Classe/atributo | Uso |
|-----------------|-----|
| `itps-feature-card` | Superfície base ou link que ocupa o card inteiro. |
| `itps-feature-card__header` | Alinha título e ícone opcional. |
| `itps-feature-card__title` | Título do atalho ou recurso. |
| `itps-feature-card__description` | Descrição curta do destino ou recurso. |
| `itps-feature-card__icon` | Ícone decorativo no canto do card. |
| `target="_blank"` | Abre destino externo em nova aba quando necessário. |
| `rel="noopener noreferrer"` | Protege links externos abertos em nova aba. |
| `aria-hidden="true"` | Esconde ícones decorativos de tecnologias assistivas. |

## Acessibilidade

Use um título coerente com a hierarquia da página. Quando o card inteiro for link, evite botões ou links adicionais dentro dele para não criar alvos interativos aninhados. Ícones decorativos devem manter `aria-hidden="true"`.