Styling: Text

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Description

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: Line Clamp

Line clamp utility classes can be used to truncate text with an ellipsis after a certain number of lines. These classes rely on the -webkit-line-clamp property (see caniuse.com for browser support) and in addition set overflow to hidden. Note that this class relies on setting the display property, so it cannot be used on the same dom element with other classes that set display, for example oj-flex.

Class template:

.oj-line-clamp-[line-clamp-level]

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

Values for [line-clamp-level]

Value (required) Name Description
1 1 line Line Clamp at 1 line
2 2 lines Line Clamp at 2 lines
3 3 lines Line Clamp at 3 lines
4 4 lines Line Clamp at 4 lines

Example
<div class="oj-line-clamp-2">This could be some very long text that requires line clamping</div>

Category: Text Colors

Sets the text color. In Redwood these classes use the !important rule.

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
<div class="oj-text-color-secondary">Secondary text</div>

Category: Typography

Sets the font weight, font size, and line height. In Redwood these classes use the !important rule.

In Redwood headers and subheaders are smaller when the screen size is in the small range, see the ResponsivePrefixes doc for more information about screen ranges.

NOTE: oj-typography classes set line-height which doesn't work reliably on inline elements, therefore these classes should be set on block (e.g. div) or inline block elements.

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

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

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 !important rule.

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
<div class="oj-typography-body-xs oj-typography-semi-bold">Caption text</div>

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