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>

<figure class="pc-cite-block">    <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.”    </blockquote>    <figcaption>        — <cite>Weaving the Web</cite>, Tim Berners‐Lee    </figcaption></figure>

<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 thingexport 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>