Prose
Prose styles a block of authored content, such as markdown or CMS output, without a class on every element. Use the .tk-prose class or the tk-prose element.
Getting paid
Payouts arrive within two business days. See payout settings.
- Bank transfer
- Card, with a 1% fee
<div class="tk-prose">
<h3>Getting paid</h3>
<p>Payouts arrive within <strong>two business days</strong>. See <a href="/payouts">payout settings</a>.</p>
<ul>
<li>Bank transfer</li>
<li>Card, with a 1% fee</li>
</ul>
</div>Class or element
Shipping
Orders over $50 ship free. Use FREESHIP at checkout.
<tk-prose> <h3>Shipping</h3> <p>Orders over $50 ship free. Use <code>FREESHIP</code> at checkout.</p> </tk-prose>
.tk-proseclass: for content in the page's own DOM, such as markdown output. The library adds the stylesheet to the page, so the class works as soon asthykes.jsloads.<tk-prose>element: when page styles must not reach the content, and Prose styles must not leak out. On mount it moves its children into its shadow root, so author the content once; don't re-render into it from a framework afterwards.
Both look the same; they use one set of rules.
What it styles
| Element | Style |
|---|---|
h1 |
Title Large (32/40, 600) |
h2 |
Title Medium (28/32, 600) |
h3 |
Title Small (24/28, 600) |
h4 |
Heading Medium (20/24, 600) |
h5 |
Heading Small (18/24, 600) |
h6 |
16/24, 600 |
p |
Body Medium (16/24, 400) |
ul / ol |
disc, then circle, then square as lists nest; decimal for ol |
blockquote |
a 4px leading border and secondary text |
code |
mono on a subtle chip with a hairline border |
kbd |
the same chip without the border |
mark |
a warning-colored highlight |
a |
the |
strong / em |
semibold / italic |
hr, small, del, sub, sup |
a hairline rule, small print, strikethrough, sub- and superscript |
- Headings get more space above than below, and margins between blocks collapse.
- The block adds no outer space: the first child's top margin and the last child's bottom margin are removed. Space around it is yours.
codeandkbddiffer only by the hairline. If you restyle one, keep them apart.- Images, figures, and description lists (
dl) aren't styled yet.
Code and tables
npm install thykes| Plan | Price |
|---|---|
| Starter | $0 |
<div class="tk-prose">
<pre><code>npm install thykes</code></pre>
<table>
<tr><th>Plan</th><th>Price</th></tr>
<tr><td>Starter</td><td>$0</td></tr>
</table>
</div>pregets mono type, a subtle surface, and horizontal scrolling. For syntax highlighting, line numbers, or copying, useCode block .tablegets borders, a semibold header row, and horizontal scrolling. For sorting or a sticky header, useTable .
Inline marks outside prose
Set --font-family-mono, press Esc, and the matching row highlights.
<p>Set <code class="tk-code">--font-family-mono</code>, press <kbd class="tk-kbd">Esc</kbd>, and the <mark class="tk-mark">matching row</mark> highlights.</p>
.tk-code, .tk-kbd, and .tk-mark give a lone snippet, key, or highlight the Prose
look anywhere on the page.
- Put the class on the real element:
<code>,<kbd>,<mark>. The class only styles. - They match the Prose chips exactly and are easy to override.
- For a shortcut with several keys, use
Kbd . It names symbol keys for screen readers and swaps ⌘ and Ctrl by platform.
When to use
- Use Prose for content you don't build element by element: articles, help text, release notes, anything rendered from markdown.
- Use
Text for single runs of text in a UI. - Don't put classes on elements inside Prose. If a block needs its own look, use a
component, such as
Section message orTable .
Do / Don't
| ✅ Do | ❌ Don't |
|---|---|
| Wrap a block of content once | Put a class on every element inside |
Use .tk-prose for markdown |
Re-render content into <tk-prose> after mount |
| Keep the heading outline clean | Expect Prose to fix skipped levels |
| Use Code block for highlighted code | Expect highlighting from a plain pre |
| Use a component for a callout | Fake a callout with hand-styled prose |
Related
Text : a single run of text; the same type roles.Link : the look of links in Prose.Kbd : keyboard shortcuts with several keys.Code block andTable : the full versions ofpreandtable.
API
No attributes, slots, or events. The content is the children.
| Use | How |
|---|---|
.tk-prose class |
<div class="tk-prose"> around the content |
<tk-prose> element |
the content inside <tk-prose> |
.tk-code, .tk-kbd, .tk-mark |
on a single <code>, <kbd>, or <mark> |
CSS
::part(prose): the container inside<tk-prose>that holds the content.
Tokens
Headings and paragraphs use the space-* scale.
| Element | Tokens |
|---|---|
| body text | text/default |
blockquote, list markers |
text/secondary; blockquote border border/default |
code, kbd, pre |
surface/subtle; code and pre border border/subtle |
mark |
surface/warning + text/default |
a |
text/accent, text/accent/hover; focus ring border/accent/focus |
hr, table borders |
border/subtle; header row surface/subtle |
Values per theme:
Accessibility
Built in:
- Prose only styles. Headings keep their levels, lists stay lists, links stay links. This
holds inside
<tk-prose>too. - Links are underlined, so they don't rely on color, and show a focus ring.
- Text colors are readable roles;
markis a background highlight, not a text color.
Your part:
- Write a clean heading outline: one
h1per document, no skipped levels. Prose won't fix it. - Use
<code>,<kbd>, and<mark>for what they mean, not for their look.