Text

Applies consistent typography styles to headings, paragraphs, single lines, and code blocks, ensuring a cohesive visual hierarchy and readability across the interface.

Usage

Use the text directive to apply consistent typographic styles to any element without writing custom CSS classes. Prefer semantic HTML elements (e.g. <h1>-<h6>, <p>, <blockquote>) paired with the matching modifier, so both the visual style and document structure remain correct. Use code-inline for short expressions within a sentence and code for multiline blocks.

API Reference

Component attribute(s)

x-h-text

Modifiers

Modifier	Description
h{1-6}	Applies a heading style to the element. Sizes 1 to 6.
blockquote	Applies a quotation style to the element.
code-inline	Applies an inline code block style (single line) to the element.
code	Applies a code block style (multiline) to the element. A line that is too long to fit scrolls horizontally within the block.
lead	Applies a lead style to the element.
lg	Large text
sm	Small text
xs	Extra small text
muted	Applies a muted style to the element. Can be used on a label.

Data Slots

Slot	Element
text	x-h-text

Examples

<h1 x-h-text.h1>Heading 1</h1>
<h2 x-h-text.h2>Heading 2</h2>
<h3 x-h-text.h3>Heading 3</h3>
<h4 x-h-text.h4>Heading 4</h4>
<h5 x-h-text.h5>Heading 5</h5>
<h6 x-h-text.h6>Heading 6</h6>
<p x-h-text.blockquote>A quote from a comment</p>
<p x-h-text.code-inline>console.log('Hello, Harmonia!');</p>
<p
  x-h-text.code
  x-text="`function sayHello() {
  console.log('Hello, Harmonia!');
}`"
></p>
<p x-h-text.lead>Lead text</p>
<p x-h-text.lg>Large text</p>
<p x-h-text>Normal text</p>
<p x-h-text.sm>Small text</p>
<p x-h-text.xs>Extra small text</p>
<p x-h-text.muted>Muted text</p>