Typography
Componentes Heading, Text, Label e Code construídos sobre as escalas tipográficas dos tokens de design.
Demonstração
Tamanhos de títulos
Heading 4xl — Display
Heading 3xl — Título
Heading 2xl — Seção
Heading xl — Subseção
Tamanhos de texto
Text xl — Corpo grande para introduções.
Text lg — Corpo ligeiramente maior.
Text md — Texto padrão para a maioria do conteúdo.
Text sm — Texto auxiliar ou secundário menor.
Text xs — Legendas e letras miúdas.
Código
Inline: const saudacao = 'olá'
function saudar(nome: string) {
return `Olá, ${nome}!`
}componentPages.heading_props_title
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
as | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h2' | componentPages.heading_prop_as |
size | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | '2xl' | componentPages.heading_prop_size |
componentPages.text_props_title
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
as | 'p' | 'span' | 'div' | 'p' | componentPages.text_prop_as |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | componentPages.text_prop_size |
weight | 'regular' | 'medium' | 'semibold' | 'bold' | 'regular' | componentPages.text_prop_weight |
color | 'default' | 'muted' | 'default' | componentPages.text_prop_color |
Uso
import { Heading, Text, Label, Code } from '@ghiberti85/ui'
// Heading
<Heading as="h1" size="4xl">Page title</Heading>
<Heading as="h2" size="2xl">Section</Heading>
// Text
<Text size="md">Body copy</Text>
<Text size="sm" color="muted">Helper text</Text>
<Text size="lg" weight="semibold">Emphasised</Text>
// Label (for forms)
<Label htmlFor="email">Email address</Label>
<Label required>Password</Label>
// Code
<Text>Call <Code>render()</Code> to mount.</Text>
<Code block>{'const x = 42'}</Code>