Typography

Styles for headings, paragraphs, lists, and more.

Headings

Heading levels H1 through H4.

This is H1

This is H2

This is H3

This is H4

Paragraph

Body text with proper leading.

The king, seeing how much happier his subjects were, realized the error of his ways and declared a holiday.

The people celebrated with feasts and festivities, and the kingdom prospered like never before.

Lead

Larger introductory paragraph text.

A component library for Julia. Beautifully designed. Copy and paste into your apps. Open Source.

Blockquote

Styled blockquote with left border.

After all, everyone enjoys a good component library.

Inline Code

Inline code snippet.

Use the Button component for interactive actions.

Large

Emphasized large text.

Are you absolutely sure?

Small

Small text with medium weight.

Email address

Muted

Muted secondary text.

Enter your email address.

Usage

julia

using Suite

H1("Page Title")
H2("Section Heading")
P("Body text paragraph.")
Lead("Introduction text.")
Blockquote("A notable quote.")
InlineCode("code_snippet()")
Large("Large text")
Small("Small label")
Muted("Muted hint text")

API Reference

All typography components accept the same props:

Prop	Type	Default	Description
class	String	""	Additional CSS classes
children...	Any	-	Text content
kwargs...	Pair	-	Any HTML attribute

Available Components

Component	HTML Element	Description
H1	h1	Page title (4xl, extrabold)
H2	h2	Section heading (3xl, border-bottom)
H3	h3	Sub-section heading (2xl)
H4	h4	Minor heading (xl)
P	p	Body paragraph
Blockquote	blockquote	Styled blockquote with left border
InlineCode	code	Inline code snippet
Lead	p	Lead intro paragraph (xl, muted)
Large	div	Large emphasized text
Small	span	Small text with medium weight
Muted	p	Muted secondary text