Styling: Text

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Version:
  • 9.1.0
Style classes handling the Text display.
.oj-text-disabled-color
Class to show disabled text.
Deprecated:
Since Description
9.0.0 Use oj-text-color-disabled instead
.oj-text-primary-color
Class to show primary text. In some themes this class may have no effect.
Deprecated:
Since Description
9.0.0 Use oj-text-color-primary instead
.oj-text-secondary-color
Class to show secondary text. In some themes this class may have no effect.
Deprecated:
Since Description
9.0.0 Use oj-text-color-secondary instead
.oj-text-tertiary-color
Class to show tertiary text. In some themes this class may have no effect.
Deprecated:
Since Description
9.0.0 Use oj-text-color-secondary instead

Category: Text Colors

Sets the text color. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Class template:

.oj-text-color-[text-color]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [text-color]

Value (required) Name Description
primary Primary text color Primary text color
secondary Secondary text color Secondary text color
disabled Disabled text color Disabled text color
danger Danger text color Danger text color
warning Warning text color Warning text color
success Success text color Success text color

Example
<span class="oj-text-color-secondary">Secondary text</span>

Category: Typography

Sets the font weight, font size, and line height. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Class template:

.oj-typography-[typography-level]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [typography-level]

Value (required) Name Description
heading-2xl Heading 2xl Extra Extra Large Heading
heading-xl Heading xl Extra Large Heading
heading-lg Heading lg Large Heading
heading-md Heading md Medium Heading
heading-sm Heading sm Smaller Heading
heading-xs Heading xs Extra Small Heading
subheading-2xl Subheading 2xl Extra Extra Large Subheading
subheading-xl Subheading xl Extra Large subheading
subheading-lg Subheading lg Large subheading
subheading-md Subheading md Medium subheading
subheading-sm Subheading sm Smaller subheading
subheading-xs Subheading xs Extra Small subheading
body-xl Body xl Extra Large Body
body-lg Body lg Large Body
body-md Body md Medium Body
body-sm Body sm Small Body
body-xs Body xs Extra Small Body
body-2xs Body 2xs Extra Extra Small Body
overline Overline Overline

Example
<span class="oj-typography-body-xs">body text</span>

Category: Typography Weight

Sets the font weight to semi bold or bold, meant to be used in conjunction with oj-typography-body-*. In Redwood these classes use the CSS !important property to override classes with higher specificity.

Class template:

.oj-typography-[typography-weight]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [typography-weight]

Value (required) Name Description
semi-bold Semi Bold Set the font weight to semi bold
bold Bold Set the font weight to bold

Example
<span class="oj-typography-body-xs oj-typography-semi-bold">Caption text</span>

Category: Text Size

Classes for small or xs text.

Classes:

.oj-text-sm
Deprecated:
Since Description
9.0.0 Use oj-typography-body-sm instead
.oj-text-xs
Deprecated:
Since Description
9.0.0 Use oj-typography-body-xs instead

Deprecated:
Since Description
9.0.0 Replace oj-text-sm with oj-typography-body-sm. Replace oj-text-xs with oj-typography-body-xs