Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Show code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Paragraph & Inline Text
This is a standard paragraph. It demonstrates the default body font,
line height, and text color applied by base.css. Paragraphs
should have comfortable reading width and vertical rhythm.
A second paragraph tests the vertical spacing between consecutive paragraphs. Good typographic rhythm keeps text blocks visually separated without excessive gaps, letting the reader's eye flow naturally from one thought to the next.
Inline elements: bold text, italic text,
bold italic, inline code,
a link, a visited link,
highlighted text, small text,
ABBR, H2O, x2,
deleted, inserted,
Ctrl + S.
Show code
<p>Standard paragraph with body font, line height, and default text color.</p>
<p>
<strong>bold</strong>, <em>italic</em>, <strong><em>bold italic</em></strong>,
<code>inline code</code>, <a href="#">link</a>, <mark>highlighted</mark>,
<small>small</small>, <abbr title="Abbreviation">ABBR</abbr>,
H<sub>2</sub>O, x<sup>2</sup>, <del>deleted</del>, <ins>inserted</ins>,
<kbd>Ctrl</kbd> + <kbd>S</kbd>
</p>Links
Default link — uses --st-color-link with underline
and hover transition.
Links in a sentence: Read the documentation for details, or visit the project homepage.
External link: Astro Documentation. (No icon — this is a raw <a> in an Astro template, so
rehypeExternalLinks never processes it.)
External link with marker: Astro Documentation (external link). (Manually annotated to match the markdown pipeline output.)
Show code
<a href="/internal/">Internal link</a>
<a href="https://docs.astro.build/">External link (raw — no icon)</a>
<!-- External link with rehypeExternalLinks-style markup -->
<a href="https://docs.astro.build/" class="external-link--auto" rel="noopener noreferrer">
Astro Documentation
<span class="external-link__auto-content">
<span class="sr-only"> (external link)</span>
<span class="external-link__auto-icon" aria-hidden="true"></span>
</span>
</a>Lists
Unordered List
- First item
-
Second item
- Nested item A
-
Nested item B
- Deep nested
- Third item
Ordered List
- First step
-
Second step
- Sub-step one
- Sub-step two
- Third step
Definition List
- Token
- A named design decision stored as a CSS custom property.
- Primitive
- A raw value (color, size, spacing) with no semantic meaning.
- Semantic
- A token that maps a role to a primitive value.
Show code
<ul>
<li>First item</li>
<li>Second item
<ul><li>Nested item</li></ul>
</li>
</ul>
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<dl>
<dt><strong>Term</strong></dt>
<dd>Definition of the term.</dd>
</dl>Blockquote
Design tokens create a shared vocabulary between design and development. They capture decisions so teams can iterate on visual style without touching component logic.
Nested blockquotes are uncommon but should still render correctly.
This is a nested blockquote.
Show code
<blockquote>
<p>Design tokens create a shared vocabulary between design and development.</p>
</blockquote>
<blockquote>
<p>Outer blockquote.</p>
<blockquote>
<p>This is a nested blockquote.</p>
</blockquote>
</blockquote>Code
Inline Code
Use the var(--st-color-link) token for link colors.
Code Block (raw <pre><code>)
This bypasses Shiki — styled by base.css only:
function greet(name) {
return `Hello, ${name}!`;
}
const message = greet("world");
console.log(message);Show code
<p>Use the <code>var(--st-color-link)</code> token for link colors.</p>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}
const message = greet("world");</code></pre>Table
| Token | Type | Example Value |
|---|---|---|
--pt-text-md | Font size | 1rem |
--pt-space-md | Spacing | 1.5rem |
--pt-radius-md | Border radius | 0.5rem |
--st-color-link | Color | brand-primary |
Show code
<table>
<thead>
<tr>
<th>Token</th>
<th>Type</th>
<th>Example Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>--pt-text-md</code></td>
<td>Font size</td>
<td>1rem</td>
</tr>
</tbody>
</table>Horizontal Rule
Content above the rule.
Content below the rule.
Show code
<p>Content above the rule.</p>
<hr />
<p>Content below the rule.</p>Details / Summary
Click to expand
This is the hidden content inside a native <details> element. No JavaScript required.
Already open
This details element starts in the open state.
Show code
<details>
<summary>Click to expand</summary>
<p>Hidden content — no JavaScript required.</p>
</details>
<details open>
<summary>Already open</summary>
<p>This details element starts in the open state.</p>
</details>Figure / Figcaption
<figure> and <figcaption> styling.
Show code
<figure>
<Image
src={placeholderImage}
alt="Descriptive alt text"
style="border-radius: var(--pt-radius-md);"
/>
<figcaption>
Figure 1 — Caption text describing the image.
</figcaption>
</figure>Form Elements (native)
Native browser form elements without component styling:
Show code
<form>
<label>
Text input
<input type="text" placeholder="Placeholder text" />
</label>
<label>
Textarea
<textarea rows="3" placeholder="Placeholder text"></textarea>
</label>
<label>
Select
<select>
<option>Option one</option>
<option>Option two</option>
</select>
</label>
<fieldset>
<legend>Checkboxes</legend>
<label><input type="checkbox" checked /> Option A</label>
<label><input type="checkbox" /> Option B</label>
</fieldset>
<fieldset>
<legend>Radio buttons</legend>
<label><input type="radio" name="demo" checked /> Choice 1</label>
<label><input type="radio" name="demo" /> Choice 2</label>
</fieldset>
<button type="button">Native button (unstyled)</button>
</form>