Typography

7 components

Typography components for headings, body text, and special text effects like animated gradients.

Preview

1. Heading 1

Level Up

2. Heading 2

Select Character

3. Heading 3

Daily Quests

4. Heading 4

Leaderboard

5. Animated Gradient Text

Legendary Loot

6. Body Text

Welcome to the arcade. Prepare yourself for the ultimate challenge. Do you have what it takes to reach the top of the leaderboards?

7. Muted / Small Text

Press start to begin. Terms and conditions apply.

Components

H1

Large heading for page titles

Typography.tsx

import { H1 } from '@/components'

<H1>Level Up</H1>

Preview

Level Up

H2

Medium heading for section titles

Typography.tsx

import { H2 } from '@/components'

<H2>Select Character</H2>

Preview

Select Character

H3

Subheading for card titles

Typography.tsx

import { H3 } from '@/components'

<H3>Daily Quests</H3>

Preview

Daily Quests

H4

Small uppercase heading for labels

Typography.tsx

import { H4 } from '@/components'

<H4>Leaderboard</H4>

Preview

Leaderboard

GradientText

Animated gradient text effect

Typography.tsx

import { GradientText } from '@/components'

<GradientText>Legendary Loot</GradientText>

Preview

Legendary Loot

BodyText

Standard body text with leading

Typography.tsx

import { BodyText } from '@/components'

<BodyText>Your content here</BodyText>

Preview

Welcome to the arcade. Prepare yourself for the ultimate challenge.

MutedText

Small muted text for secondary info

Typography.tsx

import { MutedText } from '@/components'

<MutedText>Press start to begin</MutedText>

Preview

Press start to begin. Terms and conditions apply.

Next: Buttons