Typography
A reference of typographic class-name patterns — headings, paragraphs, lists, blockquotes, inline code — for use directly on plain HTML elements.
Typography in atomx is a set of class-name patterns rather than an installable component. Apply them directly to native HTML tags as needed. There is no registry item for Typography and nothing to install — copy the class names from this page into your own JSX.
Heading 1
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Taxing Laughter: The Joke Tax Chronicles
</h1>Taxing Laughter: The Joke Tax Chronicles
Heading 2
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
The People of the Kingdom
</h2>The People of the Kingdom
Heading 3
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
The Joke Tax
</h3>The Joke Tax
Heading 4
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
People stopped telling jokes
</h4>People stopped telling jokes
Paragraph
<p className="leading-7 [&:not(:first-child)]:mt-6">
The king, seeing how much happier his subjects were, realized the error of his ways.
</p>The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
Blockquote
<blockquote className="mt-6 border-l-2 pl-6 italic">
“After all,” he would say, “everyone enjoys a good joke.”
</blockquote>“After all,” he would say, “everyone enjoys a good joke, so it's only fair that they should pay for the privilege.”
Inline code
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
@radix-ui/react-alert-dialog
</code>@radix-ui/react-alert-dialog
Lead
<p className="text-xl text-muted-foreground">
A modal dialog that interrupts the user with important content.
</p>A modal dialog that interrupts the user with important content and expects a response.
Large
<div className="text-lg font-semibold">Are you absolutely sure?</div>Small
<small className="text-sm font-medium leading-none">Email address</small>Muted
<p className="text-sm text-muted-foreground">Enter your email address.</p>Enter your email address.