DocsComponentsTypography

Typography

Data Display

Standardized text styles — headings, paragraphs, lead, and muted text.

Preview

Heading 1

Heading 2

Heading 3

Heading 4

This is a standard paragraph with comfortable line height.

This is lead text for introductions.

This is muted small text.

Usage

typography.rs
use floe_ui::components::typography;

let h1 = typography::h1("Page Title", &tokens);
let h2 = typography::h2("Section", &tokens);
let h3 = typography::h3("Subsection", &tokens);
let h4 = typography::h4("Detail", &tokens);
let body = typography::p("Paragraph text.", &tokens);
let intro = typography::lead("Lead text for intros.", &tokens);
let big = typography::large("Large text.", &tokens);
let sm = typography::small("Small text.", &tokens);
let dim = typography::muted("Muted caption.", &tokens);

API Reference

Props / Parameters

NameTypeDescription
content&strText content
tokens&DesignTokensDesign tokens for theming

Builder Functions

h1(content, tokens)
h2(content, tokens)
h3(content, tokens)
h4(content, tokens)
p(content, tokens)
lead(content, tokens)
large(content, tokens)
small(content, tokens)
muted(content, tokens)

Builder functions return pre-configured Iced widgets ready for use.

Source: floe-ui/src/components/typography.rs