Typography

<p xuiText [ellipsize]="false">The quick brown fox jumps over the lazy dog.</p>

<div class="flex flex-col gap-3">  <h1 xuiHeading>Heading level 1</h1>  <h2 xuiHeading>Heading level 2</h2>  <h3 xuiHeading>Heading level 3</h3>  <h4 xuiHeading>Heading level 4</h4>  <h5 xuiHeading>Heading level 5</h5>  <h6 xuiHeading>Heading level 6</h6>  <h2 xuiHeading [level]="5">Still an h2 in the outline, sized like an h5</h2></div>

<div class="flex flex-col gap-1">  <p xuiText color="default">default — primary body copy</p>  <p xuiText color="muted">muted — secondary copy</p>  <p xuiText color="subtle">subtle — hints and placeholders</p>  <p xuiText color="primary">primary</p>  <p xuiText color="success">success</p>  <p xuiText color="error">error</p>  <p xuiText color="warning">warning</p>  <p xuiText color="info">info</p></div>

<div class="flex flex-col gap-3">  <div class="border-border w-48 rounded border p-2">    <span xuiText ellipsize>Short enough</span>  </div>  <div class="border-border w-48 rounded border p-2">    <span xuiText ellipsize>A considerably longer value that will not fit inside this box</span>  </div></div>

<div class="flex max-w-prose flex-col gap-2">        <p xuiText>Install it with <code xuiCode>pnpm i @xui/text</code>, then import the directives.</p>        <blockquote xuiBlockquote>          A directive on the native element keeps the semantics in the markup.        </blockquote>        <pre xuiCodeBlock><code>&lt;h1 xuiHeading&gt;Title&lt;/h1&gt;&lt;p xuiText color="muted"&gt;Body&lt;/p&gt;</code></pre>        <ul xuiList>          <li>Unordered item</li>          <li>            Nested list            <ul xuiList>              <li>Inner item</li>            </ul>          </li>        </ul>        <ol xuiList>          <li>Ordered item</li>          <li>Second item</li>        </ol>      </div>