Typography
Heading, Text, Label, and Code components built on design token typography scales.
Live Demo
Heading sizes
Heading 4xl — Display
Heading 3xl — Title
Heading 2xl — Section
Heading xl — Subsection
Text sizes
Text xl — Large body copy for introductions.
Text lg — Slightly larger body copy.
Text md — Default body text for most content.
Text sm — Smaller helper or secondary text.
Text xs — Captions and fine print.
Code
Inline: const greeting = 'hello'
function greet(name: string) {
return `Hello, ${name}!`
}componentPages.heading_props_title
| Prop | Type | Default | Description |
|---|---|---|---|
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 | Type | Default | Description |
|---|---|---|---|
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 |
Usage
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>