maud_ui/primitives/
typography.rs

1//! Typography component — text utility components for consistent typographic styling.
2
3use maud::{html, Markup};
4
5/// Heading 1 (2rem, bold)
6pub fn h1(text: &str) -> Markup {
7    html! { h1.mui-h1 { (text) } }
8}
9
10/// Heading 2 (1.5rem, semi-bold)
11pub fn h2(text: &str) -> Markup {
12    html! { h2.mui-h2 { (text) } }
13}
14
15/// Heading 3 (1.25rem, semi-bold)
16pub fn h3(text: &str) -> Markup {
17    html! { h3.mui-h3 { (text) } }
18}
19
20/// Heading 4 (1.125rem, semi-bold)
21pub fn h4(text: &str) -> Markup {
22    html! { h4.mui-h4 { (text) } }
23}
24
25/// Paragraph (0.875rem, standard)
26pub fn p(text: &str) -> Markup {
27    html! { p.mui-p { (text) } }
28}
29
30/// Lead text (large intro, 1.125rem, muted)
31pub fn lead(text: &str) -> Markup {
32    html! { p.mui-lead { (text) } }
33}
34
35/// Muted text (0.875rem, muted color)
36pub fn muted(text: &str) -> Markup {
37    html! { span.mui-muted { (text) } }
38}
39
40/// Inline code (monospace, small)
41pub fn code_inline(text: &str) -> Markup {
42    html! { code.mui-code { (text) } }
43}
44
45/// Blockquote (italic, muted, left border)
46pub fn blockquote(text: &str) -> Markup {
47    html! { blockquote.mui-blockquote { (text) } }
48}
49
50/// Showcase all typography elements
51pub fn showcase() -> Markup {
52    html! {
53        div.mui-showcase__grid {
54            div {
55                p.mui-showcase__caption { "Headings" }
56                div.mui-showcase__column style="gap:0.5rem" {
57                    (h1("The quick brown fox"))
58                    (h2("The quick brown fox"))
59                    (h3("The quick brown fox"))
60                    (h4("The quick brown fox"))
61                }
62            }
63
64            div {
65                p.mui-showcase__caption { "Body text" }
66                div.mui-showcase__column style="gap:0.75rem" {
67                    (lead("A lead paragraph is great for intros. It's visually larger and lighter than body text, drawing the eye without shouting."))
68                    (p("Regular paragraph text. This is the standard body copy size used throughout the interface for readable content at comfortable line lengths."))
69                    (muted("Muted text for secondary information, timestamps, or helper copy."))
70                }
71            }
72
73            div {
74                p.mui-showcase__caption { "Code" }
75                div.mui-showcase__column style="gap:0.75rem" {
76                    p.mui-p {
77                        "Install dependencies with " (code_inline("bun install")) " then run " (code_inline("bun dev")) " to start."
78                    }
79                }
80            }
81
82            div {
83                p.mui-showcase__caption { "Blockquote" }
84                (blockquote("Design is not just what it looks like and feels like. Design is how it works."))
85            }
86        }
87    }
88}
maud_ui/primitives/typography.rs

maud_ui/primitives/
typography.rs
