# Typography

Small text helpers for plain content.

## Pure Owl component

```js
import { Typography } from "@thebase/ui";
```

```base-ui
<div style="max-width: 42rem" class="w-100">
  <h1 class="fw-semibold display-6 mb-4">Taxing Laughter: The Joke Tax Chronicles</h1>
  <p class="lh-lg mb-4">
    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>
  <blockquote class="border-start border-4 ps-3 fst-italic mb-4">
    "After all," he said, "everyone enjoys a good joke, so it's only fair that they should
    pay for the privilege."
  </blockquote>
  <h2 class="fw-semibold border-bottom pb-2 mb-3 mt-5">The King's Plan</h2>
  <p class="lh-lg mb-4">
    The king thought long and hard, and finally came up with
    <Typography variant="'code'" tag="'span'">a brilliant plan</Typography>: he would
    tax the jokes in the kingdom.
  </p>
  <h3 class="fw-semibold mb-3 mt-5">The Joke Tax</h3>
  <p class="lh-lg mb-3">
    The king's subjects were not amused. They grumbled and complained, but the king was
    firm:
  </p>
  <ul class="mb-4">
    <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>
  <p class="lh-lg mb-4">
    As a result, people stopped telling jokes, and the kingdom fell into a gloomy state.
  </p>
  <h4 class="fw-semibold mb-3 mt-5">People stopped telling jokes</h4>
  <div class="table-responsive mb-4">
    <table class="table table-bordered align-middle mb-0">
      <thead>
        <tr>
          <th>King's Treasury</th>
          <th>People's happiness</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Empty</td>
          <td>Overflowing</td>
        </tr>
        <tr>
          <td>Modest</td>
          <td>Satisfied</td>
        </tr>
        <tr>
          <td>Full</td>
          <td>Ecstatic</td>
        </tr>
      </tbody>
    </table>
  </div>
  <Typography variant="'lead'" className="'mb-4'">
    A modal dialog that interrupts the user with important content and expects a
    response.
  </Typography>
  <p class="mb-4">
    Type
    <Typography variant="'code'" tag="'span'">npx create-base-app@latest</Typography>
    to create a new project.
  </p>
  <div class="mb-1">
    <label class="fw-medium small">Email</label>
  </div>
  <Typography variant="'muted'">Enter your email address.</Typography>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Typography` | `variant` | `String` | optional |
| `Typography` | `className` | `String` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<p b-ui="typography" b-att-variant="lead">Readable intro text.</p>
<span b-ui="typography" b-att-variant="code">baseui</span>
```

Options: `b-att-variant="body|lead|muted|code|kbd"`.

Accessibility: choose semantic HTML elements first, then add BaseUI typography attributes for styling.