Componenttypography

Typography

Styles for headings, paragraphs, lists...etc

Preview

Styles for headings, paragraphs, lists...etc

Heading 1

Heading 2

Heading 3

This is a paragraph of body text.

A lead paragraph, slightly larger.

Muted helper text appears here.

const x = 1

@ui.H1(ui.DOMProps{}) { Taxing Laughter: The Joke Tax Chronicles }
@ui.P(ui.DOMProps{}) {
  The king, seeing how much happier his subjects were, realized the error of
  his ways and repealed the joke tax.
}

Installation

Add this component to your project using the CLI.

templcn add typography

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.H1(ui.DOMProps{}) { Taxing Laughter: The Joke Tax Chronicles }
@ui.P(ui.DOMProps{}) {
  The king, seeing how much happier his subjects were, realized the error of
  his ways and repealed the joke tax.
}

Composition

Use these parts together to build the component.

H1
├── P

Examples

Named examples and common variations.

All variants

The full typography scale.

Heading 1

Heading 2

Heading 3

This is a paragraph of body text.

A lead paragraph, slightly larger.

Muted helper text appears here.

const x = 1

@ui.H1(ui.DOMProps{}) { <span>Heading 1</span> }
@ui.H2(ui.DOMProps{}) { <span>Heading 2</span> }
@ui.P(ui.DOMProps{}) { <span>Body paragraph.</span> }
@ui.Muted(ui.DOMProps{}) { <span>Muted text.</span> }

API Reference

Prop	Type	Default	Description
H1 — H4	templ component	-	Heading levels 1–4 with typed tracking.
P	templ component	-	Body paragraph.
Lead	templ component	-	Large introductory paragraph.
Muted	templ component	-	De-emphasized text.
InlineCode	templ component	-	Inline monospace code span.

View source

package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

func typographyComponent(tag, slot, className string, props DOMProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		return renderElement(ctx, w, tag, attrsFromDOMProps(props, slot, className), templ.GetChildren(ctx))
	})
}

func H1(props DOMProps) templ.Component {
	return typographyComponent("h1", "h1", "scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl", props)
}
func H2(props DOMProps) templ.Component {
	return typographyComponent("h2", "h2", "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", props)
}
func H3(props DOMProps) templ.Component {
	return typographyComponent("h3", "h3", "scroll-m-20 text-2xl font-semibold tracking-tight", props)
}
func H4(props DOMProps) templ.Component {
	return typographyComponent("h4", "h4", "scroll-m-20 text-xl font-semibold tracking-tight", props)
}
func P(props DOMProps) templ.Component {
	return typographyComponent("p", "p", "leading-7 [&:not(:first-child)]:mt-6", props)
}
func Blockquote(props DOMProps) templ.Component {
	return typographyComponent("blockquote", "blockquote", "mt-6 border-l-2 border-border pl-6 italic", props)
}
func InlineCode(props DOMProps) templ.Component {
	return typographyComponent("code", "inline-code", "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", props)
}
func Lead(props DOMProps) templ.Component {
	return typographyComponent("p", "lead", "text-xl text-muted-foreground", props)
}
func Large(props DOMProps) templ.Component {
	return typographyComponent("div", "large", "text-lg font-semibold", props)
}
func Small(props DOMProps) templ.Component {
	return typographyComponent("small", "small", "text-sm font-medium leading-none", props)
}
func Muted(props DOMProps) templ.Component {
	return typographyComponent("p", "muted", "text-sm text-muted-foreground", props)
}
func List(props DOMProps) templ.Component {
	return typographyComponent("ul", "list", "my-6 ml-6 list-disc [&>li]:mt-2", props)
}
func TableProse(props DOMProps) templ.Component {
	return typographyComponent("div", "table-prose", "my-6 w-full overflow-y-auto", props)
}

Previous: Tooltip

Next: Attachment