Typography

Utility classes for headings, paragraphs, lists, and more. No component ships by default.

Taxing Laughter: The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne.

The King's Plan

The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.

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

The Joke Tax

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

Usage

Swiss UI does not ship typography as a component. Style your text directly with the utility classes shown below.

h1

Taxing Laughter: The Joke Tax Chronicles

<h1 className="scroll-m-20 text-4xl font-semibold tracking-[-0.03em] text-balance">
  Taxing Laughter: The Joke Tax Chronicles
</h1>

h2

The People of the Kingdom

<h2 className="scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-[-0.02em] first:mt-0">
  The People of the Kingdom
</h2>

h3

The Joke Tax

<h3 className="scroll-m-20 text-2xl font-semibold tracking-[-0.02em]">
  The Joke Tax
</h3>

h4

People stopped telling jokes

<h4 className="scroll-m-20 text-xl font-semibold tracking-[-0.01em]">
  People stopped telling jokes
</h4>

Paragraph

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

<p className="leading-7 not-first:mt-6">
  The king, seeing how much happier his subjects were, realized the error of
  his ways and repealed the joke tax.
</p>

Blockquote

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

<blockquote className="mt-6 border-l-2 border-foreground pl-6 italic text-muted-foreground">
  "After all," he said, "everyone enjoys a good joke, so it's only fair that
  they should pay for the privilege."
</blockquote>

List

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

<ul className="my-6 ml-6 list-disc [&>li]:mt-2">
  <li>1st level of puns: 5 gold coins</li>
  <li>2nd level of jokes: 10 gold coins</li>
  <li>3rd level of one-liners: 20 gold coins</li>
</ul>

Inline code

@base-ui/react

<code className="relative bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium">
  @base-ui/react
</code>

Table

King's Treasury	People's happiness
Empty	Overflowing
Full	Ecstatic

<div className="my-6 w-full overflow-y-auto">
  <table className="w-full">
    <thead>
      <tr className="m-0 border-t border-border p-0 even:bg-muted">
        <th className="border border-border px-4 py-2 text-left font-bold">King's Treasury</th>
        <th className="border border-border px-4 py-2 text-left font-bold">People's happiness</th>
      </tr>
    </thead>
    <tbody>
      <tr className="m-0 border-t border-border p-0 even:bg-muted">
        <td className="border border-border px-4 py-2 text-left">Empty</td>
        <td className="border border-border px-4 py-2 text-left">Overflowing</td>
      </tr>
    </tbody>
  </table>
</div>

Lead

A modal dialog that interrupts the user with important content.

<p className="text-xl text-muted-foreground text-pretty">
  A modal dialog that interrupts the user with important content.
</p>

Large

Are you absolutely sure?

<div className="text-lg font-semibold">Are you absolutely sure?</div>

Small

Email address

<small className="text-sm leading-none font-medium">Email address</small>

Muted

Enter your email address.

<p className="text-sm text-muted-foreground">Enter your email address.</p>