Skip to Content
ComponentsAtomsKicker

Kicker

Atom

Kicker é contexto compacto antes de um título, valor ou bloco. Ele orienta a leitura; não deve carregar a decisão sozinho.

Use Kicker para categorizar seções, cards, métricas, estados e blocos assistidos pela Cris. No Pulso v3, ele usa tracking consistente (--tracking-kicker) e linguagem curta: escopo, tipo, janela ou origem.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoKickerProps = {
  children: React.ReactNode
  as?: "p" | "span"
  tone?: "muted" | "primary" | "risk"
}
 
const toneClass = {
  muted: "text-[var(--fg-subtle)]",
  primary: "text-[var(--primary)]",
  risk: "text-[var(--risk-high-text)]",
}
 
export function PulsoKicker({ children, as: Component = "p", tone = "muted" }: PulsoKickerProps) {
  return (
    <Component className={["font-mono text-[10.5px] font-semibold uppercase tracking-[var(--tracking-kicker)]", toneClass[tone]].join(" ")}>
      {children}
    </Component>
  )
}
<PulsoKicker>Monitoramento · 24h</PulsoKicker>
<h2>Operação reputacional em atenção</h2>

Regras

  • Seja curto: tipo, escopo, origem ou janela temporal.
  • Não use Kicker como único indicador de risco.
  • Use --tracking-kicker; não defina tracking solto.
  • Evite frases longas; o título carrega a mensagem principal.
  • Combine com texto visível quando a cor/tom indicar estado.
Last updated on
Input OTPKeyboard Shortcut