Feature Card — Sinapse Design System

Cores, tipografia, sombras e elevacao documentadas em OKLCH.

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 elevacao documentadas em OKLCH.
          </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 elevacao documentadas em OKLCH.
        </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 elevacao documentadas em OKLCH.
  </p>
</div>

Instalação

Instale Card e Button da sua stack e rode o comando individual ITpS em seguida. O comando itps add feature-card é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add card button
pnpm dlx github:ITPS/sinapse-ui-cli add feature-card

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add card button
pnpm dlx github:ITPS/sinapse-ui-cli add feature-card

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 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 container como <a> e não coloque botões ou outros links dentro dele.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	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 snippets publicos.

Codigo fonte aberto para revisao e contribuicao.

Importe o CSS, rode a validacao 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 snippets publicos.
    </p>
  </a>

  <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="itps-feature-card">
    <div class="itps-feature-card__header">
      <h3 class="itps-feature-card__title">Repositorio no GitHub</h3>
      <i class="itps-feature-card__icon ti ti-arrow-up-right" aria-hidden="true"></i>
    </div>
    <p class="itps-feature-card__description">
      Codigo fonte aberto para revisao e contribuicao.
    </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 validacao visual e siga para a stack do produto.
    </p>
  </a>
</div>

API copy-first

Classe/atributo	Uso
`itps-feature-card`	Superfície base ou anchor de 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 uma heading 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".