Text

Displays inline text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.

Anchor to propertiesProperties

accessibilityVisibility

"visible" | "hidden" | "exclusive"

Changes the visibility of the element.

visible: the element is visible to all users.
hidden: the element is removed from the accessibility tree but remains visible.
exclusive: the element is visually hidden but remains in the accessibility tree.

color

"base" | "subdued"

Modify the color to be more or less intense.

dir

"" | "auto" | "ltr" | "rtl"

Indicates the directionality of the element’s text.

ltr: languages written from left to right (e.g. English)
rtl: languages written from right to left (e.g. Arabic)
auto: the user agent determines the direction based on the content
'': direction is inherited from parent elements (equivalent to not setting the attribute)

fontVariantNumeric

"auto" | "normal" | "tabular-nums"

Set the numeric properties of the font.

tone

Sets the tone of the component, based on the intention of the information being conveyed.

type

"strong" | "generic" | "address" | "redundant"

Provide semantic meaning and default styling to the text.

Other presentation properties on <s-text> override the default styling.

Was this section helpful?

Code

<s-text type="strong">Name:</s-text>

<s-text>Jane Doe</s-text>

Preview

Anchor to useful-forUseful for

Adding inline text elements such as labels or line errors.
Applying different visual tones and text styles to specific words or phrases within a s-paragraph, such as a strong type or critical tone.

Was this section helpful?

Anchor to best-practicesBest practices

Use plain and clear terms.
Don't use jargon or technical language.
Don't use different terms to describe the same thing.
Don't duplicate content.

Was this section helpful?