# Heading, Text, Prose and Box

> A locked-prototype page built from catalog components only: an app header Box with one border side, headings at sizes independent of their level, an eyebrow…

Language: en
Canonical: https://texuli.com/examples/texuli-typography/
Markdown: https://texuli.com/examples/texuli-typography.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

A locked-prototype page built from catalog components only: an app header Box with one border side, headings at sizes independent of their level, an eyebrow, a large tabular figure, muted and small text, long-form Prose and bordered panels. Fictional data only.

[Heading, Text, Prose and Box](https://texuli.com/examples/texuli-typography/)

`texuli-typography` · `texuli/Heading`

 texuli typography

 Props
- `as`
- `border`
- `level`
- `padding`
- `radius`
- `size`
- `surface`
- `tabular`
- `tone`
- `tracking`
- `transform`
- `weight`

Live example loads in an isolated same-origin preview frame.

Source (typography/TypographyDemo.svelte)

```
<script lang="ts">
import { Box, Heading, Prose, Text } from 'texuli/typography';
</script>

<section data-example="texuli-typography" aria-labelledby="tx-typography-title">
  <Box as="header" radius="none" border="block-end" surface="default" padding="md">
    <Text size="xs" tone="muted" transform="uppercase" tracking="wide">Example Co. workspace</Text>
    <Heading level={1} size="xl" id="tx-typography-title">Quarterly report</Heading>
  </Box>

  <div class="grid">
    <Box padding="lg" border="default" surface="default" radius="lg">
      <Text size="xs" tone="muted" transform="uppercase" tracking="wide">Revenue</Text>
      <Text size="figure" tabular weight="semibold">$1,284,300</Text>
      <Text size="sm" tone="success">Up 12% on the last quarter</Text>
    </Box>
    <Box padding="lg" border="default" surface="default" radius="lg">
      <Text size="xs" tone="muted" transform="uppercase" tracking="wide">Active teams</Text>
      <Text size="figure" tabular weight="semibold">318</Text>
      <Text size="sm" tone="muted">Updated an hour ago</Text>
    </Box>
    <Box padding="lg" surface="muted" radius="lg">
      <Heading level={2} size="sm">Next review</Heading>
      <Text size="sm">Monday, with the design reviewers.</Text>
      <Text as="small" size="xs" tone="subtle">Fictional dates and figures.</Text>
    </Box>
  </div>

  <Heading level={2} size="lg">Summary</Heading>
  <Prose as="article">
    <p>Example Co. closed the quarter ahead of plan. The new onboarding cut the time to a first report in half.</p>
    <h3>What changed</h3>
    <ul>
      <li>Reports load from a cached query.</li>
      <li>Teams share dashboards with read-only links.</li>
    </ul>
    <blockquote>Keep the next release small and reviewable.</blockquote>
  </Prose>

  <Heading level={2} size="md" tone="muted">Text tones</Heading>
  <div class="tones">
    <Text tone="primary">Primary ink</Text>
    <Text tone="success">Success: saved</Text>
    <Text tone="warning">Warning: expires soon</Text>
    <Text tone="destructive">Error: not saved</Text>
    <Text tone="info">Info: read only</Text>
    <Text lineClamp={2} size="sm" tone="muted">
      A long description clamped to two lines so a card keeps its height while the full text stays in the
      document for assistive technology and for copy, with an ellipsis where it is cut.
    </Text>
  </div>
</section>

<style>
  section {
    display: grid;
    gap: 1rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
  }
  .tones {
    display: grid;
    gap: 0.25rem;
  }
</style>
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)