Native styles

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>
    This paragraph demonstrates default body text styling as it would appear in
    longer‐form content. It is intentionally verbose enough to show natural line
    wrapping, comfortable reading measure and the effect of line height across
    multiple lines of text.
</p>

<p>
    A second paragraph continues the flow to illustrate how consecutive blocks
    of body text are separated vertically without additional markup. This helps
    demonstrate paragraph rhythm, spacing consistency and overall readability
    in real‐world usage.
</p>

<blockquote>
    “The web is more of a social creation than a technical one. I designed it for a social effect—to help people work together—and not as a technical toy.”
    <footer>— <cite>Tim Berners‐Lee</cite></footer>
</blockquote>

<ul>
    <li>List item 1</li>
    <li>
        List item 2
        <ul>
            <li>Subitem a</li>
            <li>Subitem b</li>
        </ul>
    </li>
    <li>List item 3</li>
</ul>

<ol>
    <li>List item 1</li>
    <li>
        List item 2
        <ol>
            <li>Subitem a</li>
            <li>Subitem b</li>
        </ol>
    </li>
    <li>List item 3</li>
</ol>

<dl>
    <dt>Component</dt>
    <dd>
        A reusable UI building block that encapsulates structure, styling and
        behaviour. Components are designed to be composed together to create
        consistent and maintainable interfaces.
    </dd>

    <dt>Variant</dt>
    <dd>
        A predefined visual or behavioural modification of a component. Variants
        allow the same component to adapt to different contexts without changing
        its underlying structure.
    </dd>

    <dt>Progressive disclosure</dt>
    <dd>
        A design technique where secondary or advanced information is hidden by
        default and revealed only when needed. This helps reduce cognitive load
        while keeping additional details accessible.
    </dd>
</dl>

<div class="native-inline">
    <p><strong>Bold</strong></p>
    <p><em>Italic</em></p>
    <p><u>Underline</u></p>
    <p><s>Strikethrough</s></p>
    <p><del>Deleted</del></p>
    <p><ins>Inserted</ins></p>
    <p><small>Small</small></p>
    <p><span>Subscript <sub>Sub</sub></span></p>
    <p><span>Superscript <sup>Sup</sup></span></p>
    <p><abbr title="Abbreviation">Abbr.</abbr></p>
    <p><mark>Highlighted</mark></p>
    <p><a href="#">Link text</a></p>
    <p><code>Inline code</code></p>
    <p><kbd>Keyboard</kbd></p>
</div>

<style>
    .native-inline {
        columns: 2;
        gap: var(--pc-spacing-l);
    }
</style>

<pre><code>// do a thing
export function thing() {
    return true;
}</code></pre>

<img
    src="https://placer-toolkit.vercel.app/images/desert-at-nighttime.webp"
    alt="A desert at nighttime"
/>

<table>
    <caption>I’m just a table</caption>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1a</td>
            <td>Cell 1b</td>
            <td>Cell 1c</td>
            <td>Cell 1d</td>
        </tr>
        <tr>
            <td>Cell 2a</td>
            <td>Cell 2b</td>
            <td>Cell 2c</td>
            <td>Cell 2d</td>
        </tr>
        <tr>
            <td>Cell 3a</td>
            <td>Cell 3b</td>
            <td>Cell 3c</td>
            <td>Cell 3d</td>
        </tr>
        <tr>
            <td>Cell 4a</td>
            <td>Cell 4b</td>
            <td>Cell 4c</td>
            <td>Cell 4d</td>
        </tr>
    </tbody>
</table>