Typography

bun x bosia@latest add typography

Wrapper tipis di sekitar elemen HTML semantik dengan styling Tailwind yang konsisten. Impor komponen individual alih-alih menghafal string kelas.

Preview

The King's Plan

The king, seeing how much happier his subjects were, decided to tax jokes. "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm. "I need the money," he said. He began to tax jokes at a rate of 1 gold coin per joke.

1st level of puns: 5 gold coins

2nd level of jokes: 10 gold coins

3rd level of one-liners: 20 gold coins

People stopped telling jokes

The people of the kingdom realized that the joke tax was an unjust burden. They began to speak in whispers, afraid that their words would be taxed next.

Aren't you glad this isn't real?

This story is entirely fictional.

Written for demonstration purposes only.

Props

Semua komponen tipografi berbagi prop yang sama:

Prop	Type	Default
`class`	`string`	`""`

Semua komponen juga menyebarkan ...restProps ke elemen root-nya.

Komponen

Komponen	Elemen	Deskripsi
`TypographyH1`	`<h1>`	Heading halaman
`TypographyH2`	`<h2>`	Heading bagian
`TypographyH3`	`<h3>`	Heading sub-bagian
`TypographyH4`	`<h4>`	Heading minor
`TypographyP`	`<p>`	Paragraf
`TypographyBlockquote`	`<blockquote>`	Kutipan blok
`TypographyList`	`<ul>`	List tak berurut
`TypographyInlineCode`	`<code>`	Kode inline
`TypographyLead`	`<p>`	Paragraf lead
`TypographyLarge`	`<div>`	Teks besar
`TypographySmall`	`<small>`	Teks kecil
`TypographyMuted`	`<p>`	Teks muted

Penggunaan

<script lang="ts">
	import {
		TypographyH1,
		TypographyP,
		TypographyLead,
		TypographyInlineCode,
		TypographyMuted,
	} from "$lib/components/ui/typography";
</script>

<TypographyH1>My Page Title</TypographyH1>
<TypographyLead>A brief introduction to the page.</TypographyLead>
<TypographyP>
	Use <TypographyInlineCode>bun x bosia@latest add typography</TypographyInlineCode> to install.
</TypographyP>
<TypographyMuted>Last updated today.</TypographyMuted>