Risk Classification — 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, badge) com o tema Sinapse: cores, fonte e raio vêm do tema, e as variantes itps-* desta página existem só no HTML.

42%

Aumento moderado em 3 regiões.

risco médio

Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.

import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

export function RiskClassificationExample() {
  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <div>
          <CardTitle className="text-4xl font-semibold tracking-normal">42%</CardTitle>
          <CardDescription>Aumento moderado em 3 regiões.</CardDescription>
        </div>
        <CardAction>
          <Badge variant="secondary">risco médio</Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-sm leading-normal text-muted-foreground">
          Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.
        </p>
      </CardContent>
    </Card>
  )
}

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
</script>

<template>
  <Card class="w-full max-w-2xl">
    <CardHeader>
      <div>
        <CardTitle class="text-4xl font-semibold tracking-normal">42%</CardTitle>
        <CardDescription>Aumento moderado em 3 regiões.</CardDescription>
      </div>
      <CardAction>
        <Badge variant="secondary">risco médio</Badge>
      </CardAction>
    </CardHeader>
    <CardContent>
      <p class="text-sm leading-normal text-muted-foreground">
        Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.
      </p>
    </CardContent>
  </Card>
</template>

<article class="itps-risk-classification itps-risk-classification--alert" aria-labelledby="risk-classification-alert">
  <div class="itps-risk-classification__summary">
    <div class="itps-risk-classification__copy">
      <h3 id="risk-classification-alert" class="itps-risk-classification__metric">42%</h3>
      <p class="itps-risk-classification__body">Aumento moderado em 3 regiões.</p>
    </div>
    <span class="itps-tag itps-tag--alert itps-tag--sm">risco médio</span>
  </div>
  <span class="itps-risk-classification__divider" aria-hidden="true"></span>
  <p class="itps-risk-classification__analysis">
    Movimento acima da média. Recomenda-se monitoramento intensivo nos próximos 7 dias.
  </p>
</article>

Instalação

O comando instala o Card e o Badge da sua stack com o tema Sinapse. Configure o registry uma vez por projeto em Comece por aqui.

terminal · React/Next

pnpm dlx shadcn@latest add @sinapse/risk-classification

terminal · Vue 3/Nuxt 4

pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/risk-classification.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, componha a superfície com Card e mostre a classificação com Badge. Esse caminho usa componentes que o CLI do shadcn ou do shadcn-vue instala e evita criar uma API paralela para uma leitura de status simples.

Para HTML ou wrappers finos, use itps-risk-classification quando a leitura precisa combinar percentual, tag somente leitura e análise operacional curta. A tag deve continuar textual para que a severidade não dependa somente da cor.

Exemplos

Estrutura

Peça	React/Next e Vue 3/Nuxt 4	HTML
Superfície	`Card`	`itps-risk-classification`
Cabeçalho	`CardHeader`	`itps-risk-classification__summary`
Métrica	`CardTitle`	`itps-risk-classification__metric`
Descrição	`CardDescription`	`itps-risk-classification__body`
Classificação	`CardAction` + `Badge`	`itps-tag`
Separador	borda/espaçamento do layout	`itps-risk-classification__divider`
Análise	`CardContent`	`itps-risk-classification__analysis`

Classificações

Use itps-risk-classification--success, itps-risk-classification--alert ou itps-risk-classification--danger para alterar a ênfase da métrica. O estado neutro fica sem modificador e serve para indicadores operacionais que não representam risco baixo, médio ou alto.

0%

Indicadores estáveis nos últimos 30 dias.

risco baixo

Sem sinais de surto regional. Movimento dentro do esperado para o período.

87%

Crescimento acelerado em UPAs.

risco alto

Padrão consistente com início de surto sazonal. Acionar protocolo de resposta regional.

124

Atendimentos por hora, média semanal.

estável

Volume consistente com o mês anterior. Pico previsto entre 14h e 16h.

<div class="grid w-full gap-4"> <article class="itps-risk-classification itps-risk-classification--success" aria-labelledby="risk-classification-success"> <div class="itps-risk-classification__summary"> <div class="itps-risk-classification__copy"> <h3 id="risk-classification-success" class="itps-risk-classification__metric">0%</h3> <p class="itps-risk-classification__body">Indicadores estáveis nos últimos 30 dias.</p> </div> <span class="itps-tag itps-tag--success itps-tag--sm">risco baixo</span> </div> <span class="itps-risk-classification__divider" aria-hidden="true"></span> <p class="itps-risk-classification__analysis"> Sem sinais de surto regional. Movimento dentro do esperado para o período. </p> </article> <article class="itps-risk-classification itps-risk-classification--danger" aria-labelledby="risk-classification-danger"> <div class="itps-risk-classification__summary"> <div class="itps-risk-classification__copy"> <h3 id="risk-classification-danger" class="itps-risk-classification__metric">87%</h3> <p class="itps-risk-classification__body">Crescimento acelerado em UPAs.</p> </div> <span class="itps-tag itps-tag--danger itps-tag--sm">risco alto</span> </div> <span class="itps-risk-classification__divider" aria-hidden="true"></span> <p class="itps-risk-classification__analysis"> Padrão consistente com início de surto sazonal. Acionar protocolo de resposta regional. </p> </article> <article class="itps-risk-classification" aria-labelledby="risk-classification-baseline"> <div class="itps-risk-classification__summary"> <div class="itps-risk-classification__copy"> <h3 id="risk-classification-baseline" class="itps-risk-classification__metric">124</h3> <p class="itps-risk-classification__body">Atendimentos por hora, média semanal.</p> </div> <span class="itps-tag itps-tag--default itps-tag--sm">estável</span> </div> <span class="itps-risk-classification__divider" aria-hidden="true"></span> <p class="itps-risk-classification__analysis"> Volume consistente com o mês anterior. Pico previsto entre 14h e 16h. </p> </article> </div>

<div class="grid w-full gap-4">
  <article class="itps-risk-classification itps-risk-classification--success" aria-labelledby="risk-classification-success">
    <div class="itps-risk-classification__summary">
      <div class="itps-risk-classification__copy">
        <h3 id="risk-classification-success" class="itps-risk-classification__metric">0%</h3>
        <p class="itps-risk-classification__body">Indicadores estáveis nos últimos 30 dias.</p>
      </div>
      <span class="itps-tag itps-tag--success itps-tag--sm">risco baixo</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Sem sinais de surto regional. Movimento dentro do esperado para o período.
    </p>
  </article>

  <article class="itps-risk-classification itps-risk-classification--danger" aria-labelledby="risk-classification-danger">
    <div class="itps-risk-classification__summary">
      <div class="itps-risk-classification__copy">
        <h3 id="risk-classification-danger" class="itps-risk-classification__metric">87%</h3>
        <p class="itps-risk-classification__body">Crescimento acelerado em UPAs.</p>
      </div>
      <span class="itps-tag itps-tag--danger itps-tag--sm">risco alto</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Padrão consistente com início de surto sazonal. Acionar protocolo de resposta regional.
    </p>
  </article>

  <article class="itps-risk-classification" aria-labelledby="risk-classification-baseline">
    <div class="itps-risk-classification__summary">
      <div class="itps-risk-classification__copy">
        <h3 id="risk-classification-baseline" class="itps-risk-classification__metric">124</h3>
        <p class="itps-risk-classification__body">Atendimentos por hora, média semanal.</p>
      </div>
      <span class="itps-tag itps-tag--default itps-tag--sm">estável</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Volume consistente com o mês anterior. Pico previsto entre 14h e 16h.
    </p>
  </article>
</div>

API copy-first

Classe/atributo	Uso
`itps-risk-classification`	Superfície base para resumo de risco e análise.
`itps-risk-classification--success`	Classificação positiva ou risco baixo.
`itps-risk-classification--alert`	Classificação intermediária ou risco médio.
`itps-risk-classification--danger`	Classificação crítica ou risco alto.
`itps-risk-classification__summary`	Agrupa métrica, corpo curto e tag.
`itps-risk-classification__copy`	Coluna textual da métrica.
`itps-risk-classification__metric`	Valor principal do resumo.
`itps-risk-classification__body`	Contexto curto da métrica.
`itps-risk-classification__divider`	Separador visual entre resumo e análise.
`itps-risk-classification__analysis`	Leitura operacional complementar.
`aria-labelledby`	Liga o `article` à métrica visível.
`aria-hidden="true"`	Esconde o divisor decorativo.

Acessibilidade

Use article quando o bloco resume uma avaliação independente e relacione o contêiner com a métrica via aria-labelledby. Mantenha a classificação como texto visível em itps-tag; ela é somente leitura e não deve virar botão.