Feature Card — Sinapse Design System

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.

Cores, tipografia, sombras e elevação documentadas como tokens.

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>
  )
}

<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>

<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.

terminal · React/Next

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

terminal · Vue 3/Nuxt 4

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.

Componentes prontos com variantes, estados e exemplos para copiar.

Diretrizes de marca no site do ITpS.

Importe o CSS, rode a validação visual e siga para a stack do produto.

<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".