Content Modifiers - Universal Theme

Introduction

You can use the following utility classes anywhere in your app to fine-tune the layout of your page and components. For most Oracle APEX components, you can simply populate the CSS Classes property to apply these modifiers to your page components.

Headings

Classes

Class	Example
u-text-heading-2xl u-text-title-1	Heading 2XL
u-text-heading-xl u-text-title-2	Heading XL
u-text-heading-lg u-text-title-3	Heading LG
u-text-heading-md u-text-title-4	Heading MD
u-text-heading-sm u-text-title-5	Heading SM
u-text-heading-xs u-text-title-6	Heading XS
u-text-subheading-2xl u-text-subtitle-1	Subheading 2XL
u-text-subheading-xl u-text-subtitle-2	Subheading XL
u-text-subheading-lg u-text-subtitle-3	Subheading LG
u-text-subheading-md u-text-subtitle-4	Subheading MD
u-text-subheading-sm u-text-subtitle-5	Subheading SM
u-text-subheading-xs u-text-subtitle-6	Subheading XS

Content

Classes

Class	Example
u-text-body-xl	Body XL
u-text-body-lg u-text-body-1	Body LG
u-text-body-md u-text-body-2	Body MD
u-text-body-sm u-text-body-3	Body SM
u-text-body-xs	Body XS
u-text-body-2xs	Body 2XS

Text Alignment

These classes are direction aware, meaning the text direction will be based on the direction of the language. For example, text using the u-textStart class will align text to the left for Left-to-Right languages, and will align text to the right for Right-to-Left languages.

Classes

Class	Example
u-textStart	Align text to the start of the container
u-textCenter	Align text to the center of the container
u-textEnd	Align text to the end of the container

Text Transform

These classes are useful when you want to control the text case for a given component. For example, an input field where you want characters to display in upper case.

Classes

Class	Example
u-textUpper u-text-uppercase	Sets the text to use all uppercase
u-textLower u-text-lowercase	Sets the text to use all lowercase
u-textInitCap	Sets the first letter in each word to use uppercase

Text Style

Use these classes as simple modifiers to control the text style of a given component. For example, you may want to use the u-bold to make the text of a button have a stronger weight.

Classes

Class	Example
u-text-serif	Serif
u-text-sansserif u-text-sans-serif	Sans-Serif
u-text-mono	Monospace
u-text-ultralight u-text-lighter	Ultralight
u-text-light	Light
u-text-normal	Normal
u-text-semibold u-text-semi-bold	Semi-Bold
u-bold u-text-bold	Bold
u-text-heavy u-text-bolder	Heavy
u-italics	Italicize
u-underline	Underline
u-fixedFont	Use a fixed-letter-space font
u-hidden	Hide text
u-visible	Show text

Text Wrap

Use this class to force text not to wrap inside its container.

Classes

Class	Example
u-nowrap	Text stays on one line and does not wrap

Line Clamp, Truncate & Hyphenate

Classes

Class	Example
u-lineclamp-1	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.
u-lineclamp-2	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.
u-lineclamp-3	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.
u-lineclamp-4	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.
u-lineclamp-5	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.
u-hyphenate u-hyphen	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.
u-truncate	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat diam ut venenatis tellus in metus. Scelerisque fermentum dui faucibus in ornare quam viverra. Mattis ullamcorper velit sed ullamcorper. Rhoncus est pellentesque elit ullamcorper. Sapien nec sagittis aliquam malesuada bibendum. Interdum varius sit amet mattis vulputate enim nulla. Vehicula ipsum a arcu cursus vitae congue mauris. Quis imperdiet massa tincidunt nunc pulvinar sapien et. Congue nisi vitae suscipit tellus mauris.

Colors

Classes

Class	Example
u-text-default-color	Default
u-text-title-color	Title & Headings
u-text-subtitle-color	Sub Title & Sub Headings
u-text-muted-color	Descriptions & Secondary Text

Accessibility

These classes can help you build more accessible apps and help you design a more usable experience for all users.

Classes

Class	Description
u-VisuallyHidden	This will make any text visually hidden, but still accessible for screen readers and other assistive technologies.