Feature Card — Sinapse Design System

Default

Card padrão com title, descrição e ícone. Sem href renderiza como <div>.

Tokens

Cores, tipografia, sombras e elevação documentadas em OKLCH.

<FeatureCard
title="Tokens"
description="Cores, tipografia, sombras e elevação documentadas em OKLCH."
icon="palette"
/>

<template>
<div class="itps-card flex items-start gap-4">
  <span class="material-symbols-outlined shrink-0 text-primary" style="font-size:32px">palette</span>
  <div class="flex-1">
    <h3 class="text-lg font-semibold text-primary">Tokens</h3>
    <p class="mt-1 text-sm text-muted-foreground">Cores, tipografia, sombras e elevação documentadas em OKLCH.</p>
  </div>
</div>
</template>

<div className="itps-card flex items-start gap-4">
<span className="material-symbols-outlined shrink-0 text-primary" style={{fontSize:32}}>palette</span>
<div className="flex-1">
  <h3 className="text-lg font-semibold text-primary">Tokens</h3>
  <p className="mt-1 text-sm text-muted-foreground">Cores, tipografia, sombras e elevação documentadas em OKLCH.</p>
</div>
</div>

<div class="itps-card flex items-start gap-4">
<span class="material-symbols-outlined shrink-0 text-primary" style="font-size:32px">palette</span>
<div class="flex-1">
  <h3 class="text-lg font-semibold text-primary">Tokens</h3>
  <p class="mt-1 text-sm text-muted-foreground">Cores, tipografia, sombras e elevação documentadas em OKLCH.</p>
</div>
</div>

Como link

Recebendo href, vira <a> com hover state (bg-secondary-200).

Componentes

36 componentes Astro prontos com variants e estados.

widgets

<FeatureCard
title="Componentes"
description="36 componentes Astro prontos com variants e estados."
icon="widgets"
href="/componentes"
/>

Link externo

external substitui o ícone por arrow_outward indicando saída do site.

Repositório no GitHub

Source code aberto, contribuições bem-vindas.

arrow_outward

<FeatureCard
title="Repositório no GitHub"
description="Source code aberto, contribuições bem-vindas."
icon="code"
href="https://github.com"
external
/>

Sem ícone

Ícone é opcional. Sem ele, card vira só title + descrição.

Sobre o sistema

Princípios, governance e roadmap.

<FeatureCard
title="Sobre o sistema"
description="Princípios, governance e roadmap."
href="/sobre"
/>

Props

Prop	Tipo	Default	Descrição
`title`	`string`	—	Título coral, obrigatório.
`description`	`string`	—	Texto descritivo (`max-w-[52ch]`).
`icon`	`string`	—	Material Symbol Outlined name.
`href`	`string`	`'#'`	Quando presente, renderiza `<a>`.
`external`	`boolean`	`false`	Substitui `icon` por `arrow_outward`.