# Typography

Heading, paragraph, list, table, and inline-text recipes on Poetry tokens — class strings transcribed from upstream at the pin. Fonts ride the theme: the same markup goes mono under lyra, serif under sera.

## Default

```erb
<%# The full upstream typography demo (typography-demo.tsx @ 1773ecfe, shadcn@4.19.0),
    class strings transcribed exactly - these are the copy-paste recipes. %>
<article class="w-full max-w-2xl">
  <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
    Taxing Laughter: The Joke Tax Chronicles
  </h1>
  <p class="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
    Once upon a time, in a far-off land, there was a very lazy king who spent
    all day lounging on his throne. One day, his advisors came to him with a
    problem: the kingdom was running out of money.
  </p>
  <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
    The King's Plan
  </h2>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    The king thought long and hard, and finally came up with
    <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>:
    he would tax the jokes in the kingdom.
  </p>
  <blockquote class="mt-6 border-l-2 pl-6 italic">
    "After all," he said, "everyone enjoys a good joke, so it's only fair
    that they should pay for the privilege."
  </blockquote>
  <h3 class="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
    The Joke Tax
  </h3>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    The king's subjects were not amused. They grumbled and complained, but
    the king was firm:
  </p>
  <ul class="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>
  <div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
      <thead>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <th class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
            Treasury
          </th>
          <th class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
            Happiness
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">Empty</td>
          <td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">Overflowing</td>
        </tr>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">Modest</td>
          <td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">Satisfied</td>
        </tr>
      </tbody>
    </table>
  </div>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    The people of the kingdom, feeling uplifted by the laughter, started to
    tell jokes and puns again, and soon the entire kingdom was in on the joke.
  </p>
</article>
```

## Headings

```erb
<div class="flex w-full max-w-2xl flex-col gap-6">
  <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
    Taxing Laughter: The Joke Tax Chronicles
  </h1>
  <h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
    The People of the Kingdom
  </h2>
  <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
    The Joke Tax
  </h3>
  <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
    People stopped telling jokes
  </h4>
</div>
```

## Inline code

```erb
<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
  poetry_badge(variant: :outline)
</code>
```

## Large

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

## Lead

```erb
<p class="text-xl text-muted-foreground">
  A modal dialog that interrupts the user with important content and expects
  a response.
</p>
```

## Muted

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

## Small

```erb
<small class="text-sm leading-none font-medium">Email address</small>
```