123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyHeadings() {
	<div class="space-y-4">
		@popui.Title() { Page Title }
		@popui.Subtitle() { Section Subtitle }
	</div>
}

123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyParagraphs() {
	<div class="space-y-2">
		@popui.P() { This is a standard paragraph with default styling. }
		@popui.Description() { This is a description with secondary text color. }
	</div>
}

12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyInline() {
	@popui.P() {
		<span>This paragraph contains </span>
		@popui.Mark() { highlighted text }
		<span> using the Mark component.</span>
	}
}

123456789101112
package showcase

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyAlerts() {
	<div class="space-y-3">
		@popui.Info() { This is an informational message with an icon. }
		@popui.Warning() { This is a warning message with an alert icon. }
	</div>
}

1234567891011121314151617
package showcase

import (
	popui "github.com/invopop/popui/go"
)

templ TypographyProse() {
	@popui.Prose() {
		<h1>Prose Heading</h1>
		<p>This component wraps raw HTML with Tailwind prose styling for consistent typography.</p>
		<ul>
			<li>Automatically styled lists</li>
			<li>Formatted headings</li>
			<li>Consistent spacing</li>
		</ul>
	}
}