Typography
Componente polimórfico para toda a tipografia do design system. Escala completa de variantes com element-as prop.
Como usar
O componente Typography usa a prop as para controlar o elemento HTML e variant para o estilo.
Display
Título H1
Título H2
Título H3
Texto largo para introduções e leads de seção.
Corpo padrão para leitura contínua e parágrafos de conteúdo.
Corpo pequeno para metadados, legendas e informações secundárias.
Rótulo de seção
Caption e metadados
Texto em muted-foreground para notas e avisos discretos.
const system = "MN Design System"Import
import { Typography } from "@/components/typography"
Padrão de implementação
Exemplos de uso do componente Typography em diferentes contextos.
Hierarquia de texto em card
<div className="ds-card !p-[30px]">
<Typography as="p" variant="label" className="text-primary">
SEÇÃO
</Typography>
<Typography as="h2" variant="h2" className="mt-2 text-foreground">
Título do card
</Typography>
<Typography as="p" variant="body-sm" className="mt-3 text-muted-foreground">
Descrição complementar com detalhes sobre o conteúdo.
</Typography>
</div>Elemento polimórfico (as prop)
// Renderiza como <h1> mas com estilo de h2
<Typography as="h1" variant="h2">
Título semântico h1 com estilo h2
</Typography>
// Renderiza como <p> mas com estilo de label
<Typography as="p" variant="label">
Rótulo em parágrafo
</Typography>
// Renderiza como <span> com estilo de body-sm
<Typography as="span" variant="body-sm">
Texto inline
</Typography>Props e uso
API do componente Typography.
Props
variant
"display" | "h1" | "h2" | "h3" | "body-lg" | "body" | "body-sm" | "label" | "caption" | "muted" | "code"
Controla o tamanho, peso e família da fonte.
as
ElementType
Define o elemento HTML renderizado. Por padrão, cada variante tem um elemento padrão (h1 para display, p para body etc.).
className
string
Classes adicionais. Use para sobrescrever a cor (text-foreground, text-primary, etc.).
children
ReactNode
Conteúdo de texto.
Elementos padrão por variante
MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter