Typography

Content

Semantic text component with eleven typographic variants, five weights, four color tokens, and alignment control — all built on design system CSS variables.

Import

ts 
import Text from '$lib/components/Text.svelte';

Usage

Discover, Follow, Share

Zero-dependency Svelte 5 component library with animations and accessibility.

svelte 
<Text variant="h1">Discover, Follow, Share</Text>
<Text variant="body" color="muted">Zero-dependency Svelte 5 component library.</Text>

Type Scale

All eleven variants from display down to quote.

display

Ambar UI

h1

Discover, Follow, Share

h2

Trending Videos

h3

Popular This Week

h4

Suggested Users

body

A zero-dependency Svelte 5 component library. Every component ships with transition animations, keyboard navigation, and accessibility support.

body-sm

Last updated May 2026 · Svelte 5 · Tailwind v4

caption 124K likes · 3.2K comments · 892 shares
label Categories
code import Text from '$lib/components/Text.svelte'
quote
Content creation is a way of life, not just a job. Every video is a story, every story a connection.
svelte 
<Text variant="display">Ambar UI</Text>
<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="h4">Heading 4</Text>
<Text variant="body">Body text — default readable size.</Text>
<Text variant="body-sm" color="muted">Smaller body — metadata, timestamps.</Text>
<Text variant="caption" color="muted">Caption — inline labels, counts.</Text>
<Text variant="label" color="muted">Section label</Text>
<Text variant="code">import Text from '$lib/components/Text.svelte'</Text>
<Text variant="quote" color="muted">Every story is a connection.</Text>

Weights

Use weight to override the default font weight for any variant.

normal

Ambar UI

medium

Ambar UI

semibold

Ambar UI

bold

Ambar UI

extrabold

Ambar UI

svelte 
<Text variant="h3" weight="normal">Normal</Text>
<Text variant="h3" weight="medium">Medium</Text>
<Text variant="h3" weight="semibold">Semibold</Text>
<Text variant="h3" weight="bold">Bold</Text>
<Text variant="h3" weight="extrabold">Extrabold</Text>

Colors

Four semantic color tokens that map to CSS variables, adapting automatically to light and dark themes.

default

Discover and Share

muted

Discover and Share

accent

Discover and Share

destructive

Discover and Share

svelte 
<Text color="default">Default foreground</Text>
<Text color="muted">Muted foreground</Text>
<Text color="accent">Accent color</Text>
<Text color="destructive">Destructive color</Text>

Alignment

Control text alignment with align. Inherits from the parent when unset.

Left-aligned heading

The most readable alignment for long paragraphs and flowing text.

Centered heading

Used for short descriptions and hero sections.

Right-aligned heading

Suitable for numbers, dates, and currency values.

svelte 
<Text variant="h3" align="left">Left-aligned</Text>
<Text variant="h3" align="center">Centered</Text>
<Text variant="h3" align="right">Right-aligned</Text>

Truncate

Add truncate to clip overflow with an ellipsis. Requires a bounded-width container.

This long text will be clipped with an ellipsis when it overflows.

svelte 
<div style="width: 200px;">
  <Text truncate>This long text will be clipped with an ellipsis.</Text>
</div>

Example — Profile Card

Combining multiple variants in a real-world component.

Z

Zeynep Kaya

@zeynep.dance

Istanbul · dance & music · living life beautifully

842

Following

12.4K

Followers

284K

Likes
Recent Videos
▶ 124K
▶ 89K
▶ 56K

Variant → HTML Element

The variant prop controls both the visual style and the semantic HTML element rendered.

display <h1>
h1 <h1>
h2 <h2>
h3 <h3>
h4 <h4>
body <p>
body-sm <p>
caption <span>
label <span>
code <code>
quote <blockquote>

API Reference

PropTypeDefaultDescription
variant 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body-sm' | 'caption' | 'label' | 'code' | 'quote''body'Typographic style and the HTML element to render. Headings use h1–h4, body uses p, caption/label use span, code uses code, quote uses blockquote.
weight 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'—Override the font weight. Each variant has a sensible default weight — only set this when you need to override it.
align 'left' | 'center' | 'right'—Text alignment. Inherits from parent when unset.
color 'default' | 'muted' | 'accent' | 'destructive''default'Semantic color token applied to the text.
truncate booleanfalseClip overflowing text with an ellipsis. Requires a bounded-width container.
children *Snippet—The text content or markup to render inside the element.