Typography

Text

Run of text in one of the typography variants h1 to h5, caption, or body that inherits its color from its container.

import { Text } from '@lostgradient/cinder';
typographytext
01

Overview

Reference usage

A run of text in one of the typography variants h1 to h5, caption, and body. Color is inherited from the container.

Usage

svelte 
<script lang="ts">
  import { Text } from '@lostgradient/cinder';
</script>

<Text variant="h2">Release notes</Text>
<Text>Body text renders a paragraph.</Text>
<Text variant="h1" as="h2">Styled as h1, rendered as h2</Text>
Live preview

Overriding the element

Styled as h1, rendered as h2

Inline caption

02

When to use

Use when
  • Rendering a heading, paragraph, or caption in the design system's type scale.
  • Overriding the rendered element while keeping a variant's visual style.
Avoid when
  • Introducing a page section with an eyebrow, description, or actions — use section-heading instead.
  • Rendering Markdown content — compose the Markdown renderer instead.
03

Examples

Overriding the element

The as prop swaps the rendered element while keeping the variant style, for example a visually large h2 inside a section.

Inherited color

Text takes its color from the container, so it follows any surface it is placed on.

Typography variants

Each variant renders its matching element: h1 to h5 headings, and paragraphs for caption and body.

04

Props

Props for text
Name
Type
Default
Description
variant 'h1''h2''h3''h4''h5''caption''body' 'body' Typography variant. Headings render h1 to h5; caption and body render paragraphs.
as NonMetadataHTMLElementTagName Element tag that overrides the variant's default element.
children required snippet Required text content.