Risk Classification — Sinapse Design System

42%

Aumento moderado em 3 regioes.

risco medio

Movimento acima da media. Recomenda monitoramento intensivo nos proximos 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 regioes.</CardDescription>
        </div>
        <CardAction>
          <Badge variant="secondary">risco medio</Badge>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-sm leading-normal text-muted-foreground">
          Movimento acima da media. Recomenda monitoramento intensivo nos proximos 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 regioes.</CardDescription>
      </div>
      <CardAction>
        <Badge variant="secondary">risco medio</Badge>
      </CardAction>
    </CardHeader>
    <CardContent>
      <p class="text-sm leading-normal text-muted-foreground">
        Movimento acima da media. Recomenda monitoramento intensivo nos proximos 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 regioes.</p>
    </div>
    <span class="itps-tag itps-tag--alert itps-tag--sm">risco medio</span>
  </div>
  <span class="itps-risk-classification__divider" aria-hidden="true"></span>
  <p class="itps-risk-classification__analysis">
    Movimento acima da media. Recomenda monitoramento intensivo nos proximos 7 dias.
  </p>
</article>

Instalação

Instale Card e Badge da sua stack e rode o comando individual ITpS em seguida. O comando itps add risk-classification é 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 badge
pnpm dlx github:ITPS/sinapse-ui-cli add risk-classification

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add card badge
pnpm dlx github:ITPS/sinapse-ui-cli add risk-classification

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, componha a superfície com Card e mostre a classificação com Badge. Esse caminho usa componentes que a CLI 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 read-only 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 Vue3/Nuxt4	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 estaveis nos ultimos 30 dias.

risco baixo

Sem sinais de surto regional. Movimento dentro do esperado para o periodo.

87%

Crescimento acelerado em UPAs.

risco alto

Padrao consistente com inicio de surto sazonal. Acionar protocolo de resposta regional.

124

Atendimentos por hora, media semanal.

estavel

Volume consistente com mes 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 estaveis nos ultimos 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 periodo. </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"> Padrao consistente com inicio 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, media semanal.</p> </div> <span class="itps-tag itps-tag--default itps-tag--sm">estavel</span> </div> <span class="itps-risk-classification__divider" aria-hidden="true"></span> <p class="itps-risk-classification__analysis"> Volume consistente com mes 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 estaveis nos ultimos 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 periodo.
    </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">
      Padrao consistente com inicio 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, media semanal.</p>
      </div>
      <span class="itps-tag itps-tag--default itps-tag--sm">estavel</span>
    </div>
    <span class="itps-risk-classification__divider" aria-hidden="true"></span>
    <p class="itps-risk-classification__analysis">
      Volume consistente com mes 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 container com a métrica via aria-labelledby. Mantenha a classificação como texto visível em itps-tag; ela é read-only e não deve virar botão.