QsText

<qs-text>alpha

Running text in one of the system's core text styles. Each variant renders the element that matches its meaning: a paragraph for body, footnote and print, inline <span> for label, and <code> for code.

Variants

Body: generous running text at 17px with 1.47 leading, made for reading.Footnote: secondary detail, captions and helper text.

Label--color-text

Print

<qs-text>Body text.</qs-text>
<qs-text variant="footnote">Secondary detail.</qs-text>
<qs-text variant="label">Status</qs-text>
<qs-text variant="code">--color-text</qs-text>
<qs-text variant="print">Print</qs-text>

Prop

Prop	Type	Default	Description
variant	"body" | "footnote" | "label" | "code" | "print"	"body"	The text style.
text	string	—	The text content of the element, captured from light DOM before the first render.

Usage

Variant	Element	Use for	Tokens
body (default)	<p>	Running text	--text-body-*
footnote	<p>	Secondary detail, captions; shown in --qs-text-footnote-color	--text-footnote-*
label	<span>	Short uppercase mono labels, inline	--text-label-*
code	<code>	Token names, inline code	--text-code-*
print	<p>	The pixel "print" voice, for short display accents only	--text-print-*

• label and code are inline and sit inside a line of text. The others are blocks.
• Markup inside is kept: <em>, <strong>, <span lang>. For links, use qs-link: it is always underlined, while a bare <a> takes whatever link styles the page has, and some sites (this docs site included) reset them so a link looks like plain text.
• Don't use print for anything longer than a few words: the pixel face is decorative and hard to read at length.
• In the Industrial theme, body text switches to mono (--font-body).

In a framework

Children are the static content of the first render, and their markup (links, <em>, lang spans) is kept. For text that changes, bind Elena's text property instead of rendering a child, as Elena recommends:

<!-- React -->  <qs-text text={label} />
<!-- Vue -->    <qs-text :text="label" />
<!-- Angular --><qs-text [text]="label" />

Don't let a framework add or remove individual children inside qs-text: once rendered, they live inside the component's own element.