Skip to content
On this page


The j-text component is used to display text in a variety of styles and formats.


Use the j-text component to display text in various styles and formats.

Text content
<j-text color="ui-800" weight="500" size="700">Text content</j-text>


Variant string

Use the variant property to set the visual style of the text. Possible values include:

  • heading-lg: Used for large headings.
  • heading: Used for headings.
  • heading-sm: Used for small headings.
  • subheading: Used for subheadings.
  • body: Used for body text.
  • label: Used for labels.
  • footnote: Used for footnotes.
Large Heading
<j-text variant="heading-lg">Large Heading</j-text>

Size number

Use the size property to set the size of the text. Possible values range from 100 (smallest) to 900 (largest).

Medium-sized Text
<j-text size="700">Medium-sized Text</j-text>

Tag string

Use the tag property to specify the HTML tag used to render the text. This is useful for SEO and accessibility purposes.

Heading 1
<j-text tag="h1">Heading 1</j-text>

Nomargin boolean

Use the nomargin property to remove any bottom margin around the text.

No Margin
<j-text nomargin>No Margin</j-text>

Inline boolean

Use the inline property to display the text inline with other elements.

This is particularly useful for labels and small snippets of text.

Inline TextInline Text
<j-text inline>Inline Text</j-text> <j-text inline>Inline Text</j-text>

Uppercase boolean

Use the uppercase property to convert the text to uppercase.

Uppercase Text
<j-text uppercase>Uppercase Text</j-text>

Color string

The color property changes to font color of the text. You can use any of the color variables defined in the of the documentation

Red Text
<j-text color="danger-500">Red Text</j-text>

Weight string

Use the weight property to set the font weight of the text.

Possible values include normal, bold, and lighter.

Bold Text
<j-text weight="bolder">Bold Text</j-text>