Typography

text= — type scale

Sets font size, weight, line-height, and letter-spacing as a semantic bundle.

<p text="display">Display</p>
<p text="heading">Heading</p>
<p text="subheading">Subheading</p>
<p text="body">Body — the quick brown fox jumps over the lazy dog</p>
<p text="caption">Caption — supporting detail text</p>
<p text="label">Label</p>
<p text="overline">Overline</p>
<code text="code">const x = useaura()</code>

weight=

<p weight="light">Light — 300</p>
<p weight="regular">Regular — 400</p>
<p weight="medium">Medium — 500</p>
<p weight="semibold">Semibold — 600</p>
<p weight="bold">Bold — 700</p>
<p weight="black">Black — 900</p>

truncate=

Clamp text to 1, 2, 3, or 4 lines. Boolean truncate= clips to a single line.

<!-- Single line -->
<p truncate>The quick brown fox jumps over the lazy dog and keeps running</p>

<!-- 2-line clamp -->
<p truncate="2">The quick brown fox jumps over the lazy dog and keeps running
through the forest until it can no longer be seen.</p>

<!-- 3-line clamp -->
<p truncate="3">Long content that wraps across three lines and no further...</p>

balance

Applies text-wrap: balance so multi-line headings break evenly.

<h2 text="heading" balance>This heading balances its line breaks nicely</h2>

text-align=

<p text-align="left">Left aligned text</p>
<p text-align="center">Center aligned text</p>
<p text-align="right">Right aligned text</p>