# Text Typography utilities provide a comprehensive set of font sizes, weights, transforms, and alignment for consistent text styling. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-text--introduction ## Variants documented in Storybook - TextShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-text--textshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Text. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Text Utilities Reference

A comprehensive reference for typography utilities, including font sizes, line heights, weights, transforms, and more.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Font Size

Format: ux4g-text-{alignment/transform}

font-size-60 (60px) ux4g-fs-60
font-size-52 (52px) ux4g-fs-52
font-size-40 (40px) ux4g-fs-40
font-size-36 (36px) ux4g-fs-36
font-size-32 (32px) ux4g-fs-32
font-size-28 (28px) ux4g-fs-28
font-size-24 (24px) ux4g-fs-24
font-size-20 (20px) ux4g-fs-20
font-size-18 (18px) ux4g-fs-18
font-size-16 (16px) ux4g-fs-16
font-size-14 (14px) ux4g-fs-14
font-size-12 (12px) ux4g-fs-12
font-size-11 (11px) ux4g-fs-11

Line Height

Format: ux4g-text-{alignment/transform}

line-height-80 (80px) ux4g-lh-80
line-height-72 (72px) ux4g-lh-72
line-height-52 (52px) ux4g-lh-52
line-height-44 (44px) ux4g-lh-44
line-height-36 (36px) ux4g-lh-36
line-height-32 (32px) ux4g-lh-32
line-height-28 (28px) ux4g-lh-28
line-height-24 (24px) ux4g-lh-24
line-height-20 (20px) ux4g-lh-20
line-height-18 (18px) ux4g-lh-18
line-height-16 (16px) ux4g-lh-16
line-height-14 (14px) ux4g-lh-14

Font Weight

Format: ux4g-text-{alignment/transform}

font-weight-regular ux4g-fw-regular
font-weight-medium ux4g-fw-medium
font-weight-semibold ux4g-fw-semibold
font-weight-bold ux4g-fw-bold
font-weight-d-semibold ux4g-fw-d-semibold
font-weight-d-bold ux4g-fw-d-bold

Font Family

Format: ux4g-text-{alignment/transform}

font-family-base ux4g-ff-base
font-family-display ux4g-ff-display

Text Alignment

Format: ux4g-text-{alignment/transform}

text-start ux4g-text-start
text-center ux4g-text-center
text-end ux4g-text-end

Text Transform

Format: ux4g-text-{alignment/transform}

text-lowercase ux4g-text-lowercase
text-uppercase ux4g-text-uppercase
text-capitalize ux4g-text-capitalize
text-none ux4g-text-none

Text Decoration

Format: ux4g-text-{alignment/transform}

text-underline ux4g-text-underline
text-line-through ux4g-text-line-through
text-no-underline ux4g-text-no-underline

Wrapping & Break

Format: ux4g-text-{alignment/transform}

text-wrap ux4g-text-wrap
text-nowrap ux4g-text-nowrap
text-break ux4g-text-break
text-truncate ux4g-text-truncate

List Styles

Format: ux4g-text-{alignment/transform}

list-none ux4g-list-none
list-disc ux4g-list-disc
list-decimal ux4g-list-decimal
``` React: ```jsx import React from 'react'; const TextExample1Demo = () => ( <>
Utilities

Text Utilities Reference

A comprehensive reference for typography utilities, including font sizes, line heights, weights, transforms, and more.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Font Size */}

Font Size

Format: ux4g-text-{alignment/transform}

font-size-60 (60px) ux4g-fs-60
font-size-52 (52px) ux4g-fs-52
font-size-40 (40px) ux4g-fs-40
font-size-36 (36px) ux4g-fs-36
font-size-32 (32px) ux4g-fs-32
font-size-28 (28px) ux4g-fs-28
font-size-24 (24px) ux4g-fs-24
font-size-20 (20px) ux4g-fs-20
font-size-18 (18px) ux4g-fs-18
font-size-16 (16px) ux4g-fs-16
font-size-14 (14px) ux4g-fs-14
font-size-12 (12px) ux4g-fs-12
font-size-11 (11px) ux4g-fs-11
{/* Line Height */}

Line Height

Format: ux4g-text-{alignment/transform}

line-height-80 (80px) ux4g-lh-80
line-height-72 (72px) ux4g-lh-72
line-height-52 (52px) ux4g-lh-52
line-height-44 (44px) ux4g-lh-44
line-height-36 (36px) ux4g-lh-36
line-height-32 (32px) ux4g-lh-32
line-height-28 (28px) ux4g-lh-28
line-height-24 (24px) ux4g-lh-24
line-height-20 (20px) ux4g-lh-20
line-height-18 (18px) ux4g-lh-18
line-height-16 (16px) ux4g-lh-16
line-height-14 (14px) ux4g-lh-14
{/* Font Weight */}

Font Weight

Format: ux4g-text-{alignment/transform}

font-weight-regular ux4g-fw-regular
font-weight-medium ux4g-fw-medium
font-weight-semibold ux4g-fw-semibold
font-weight-bold ux4g-fw-bold
font-weight-d-semibold ux4g-fw-d-semibold
font-weight-d-bold ux4g-fw-d-bold
{/* Font Family */}

Font Family

Format: ux4g-text-{alignment/transform}

font-family-base ux4g-ff-base
font-family-display ux4g-ff-display
{/* Text Alignment */}

Text Alignment

Format: ux4g-text-{alignment/transform}

text-start ux4g-text-start
text-center ux4g-text-center
text-end ux4g-text-end
{/* Text Transform */}

Text Transform

Format: ux4g-text-{alignment/transform}

text-lowercase ux4g-text-lowercase
text-uppercase ux4g-text-uppercase
text-capitalize ux4g-text-capitalize
text-none ux4g-text-none
{/* Text Decoration */}

Text Decoration

Format: ux4g-text-{alignment/transform}

text-underline ux4g-text-underline
text-line-through ux4g-text-line-through
text-no-underline ux4g-text-no-underline
{/* Text Wrapping & Break */}

Wrapping & Break

Format: ux4g-text-{alignment/transform}

text-wrap ux4g-text-wrap
text-nowrap ux4g-text-nowrap
text-break ux4g-text-break
text-truncate ux4g-text-truncate
{/* List Styles */}

List Styles

Format: ux4g-text-{alignment/transform}

list-none ux4g-list-none
list-disc ux4g-list-disc
list-decimal ux4g-list-decimal
); export default TextExample1Demo; ``` Angular: ```html
Utilities

Text Utilities Reference

A comprehensive reference for typography utilities, including font sizes, line heights, weights, transforms, and more.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Font Size

Format: ux4g-text-{alignment/transform}

font-size-60 (60px) ux4g-fs-60
font-size-52 (52px) ux4g-fs-52
font-size-40 (40px) ux4g-fs-40
font-size-36 (36px) ux4g-fs-36
font-size-32 (32px) ux4g-fs-32
font-size-28 (28px) ux4g-fs-28
font-size-24 (24px) ux4g-fs-24
font-size-20 (20px) ux4g-fs-20
font-size-18 (18px) ux4g-fs-18
font-size-16 (16px) ux4g-fs-16
font-size-14 (14px) ux4g-fs-14
font-size-12 (12px) ux4g-fs-12
font-size-11 (11px) ux4g-fs-11

Line Height

Format: ux4g-text-{alignment/transform}

line-height-80 (80px) ux4g-lh-80
line-height-72 (72px) ux4g-lh-72
line-height-52 (52px) ux4g-lh-52
line-height-44 (44px) ux4g-lh-44
line-height-36 (36px) ux4g-lh-36
line-height-32 (32px) ux4g-lh-32
line-height-28 (28px) ux4g-lh-28
line-height-24 (24px) ux4g-lh-24
line-height-20 (20px) ux4g-lh-20
line-height-18 (18px) ux4g-lh-18
line-height-16 (16px) ux4g-lh-16
line-height-14 (14px) ux4g-lh-14

Font Weight

Format: ux4g-text-{alignment/transform}

font-weight-regular ux4g-fw-regular
font-weight-medium ux4g-fw-medium
font-weight-semibold ux4g-fw-semibold
font-weight-bold ux4g-fw-bold
font-weight-d-semibold ux4g-fw-d-semibold
font-weight-d-bold ux4g-fw-d-bold

Font Family

Format: ux4g-text-{alignment/transform}

font-family-base ux4g-ff-base
font-family-display ux4g-ff-display

Text Alignment

Format: ux4g-text-{alignment/transform}

text-start ux4g-text-start
text-center ux4g-text-center
text-end ux4g-text-end

Text Transform

Format: ux4g-text-{alignment/transform}

text-lowercase ux4g-text-lowercase
text-uppercase ux4g-text-uppercase
text-capitalize ux4g-text-capitalize
text-none ux4g-text-none

Text Decoration

Format: ux4g-text-{alignment/transform}

text-underline ux4g-text-underline
text-line-through ux4g-text-line-through
text-no-underline ux4g-text-no-underline

Wrapping & Break

Format: ux4g-text-{alignment/transform}

text-wrap ux4g-text-wrap
text-nowrap ux4g-text-nowrap
text-break ux4g-text-break
text-truncate ux4g-text-truncate

List Styles

Format: ux4g-text-{alignment/transform}

list-none ux4g-list-none
list-disc ux4g-list-disc
list-decimal ux4g-list-decimal
``` ### 2. Text Showcase — Typography Scale HTML: ```html
Display 60px
Heading 40px
Heading 32px
Heading 24px
Body 16px
``` React: ```jsx import React from 'react'; const TextExample2Demo = () => ( <>
Display 60px
Heading 40px
Heading 32px
Heading 24px
Body 16px
); export default TextExample2Demo; ``` Angular: ```html
Display 60px
Heading 40px
Heading 32px
Heading 24px
Body 16px
``` ### 3. Text Showcase — Text Transforms HTML: ```html
LOWERCASE TEXT
uppercase text
capitalize text
``` React: ```jsx import React from 'react'; const TextExample3Demo = () => ( <>
LOWERCASE TEXT
uppercase text
capitalize text
); export default TextExample3Demo; ``` Angular: ```html
LOWERCASE TEXT
uppercase text
capitalize text
``` ### 4. Text Showcase — Weights & Families HTML: ```html
Base regular
Base bold
Display bold
Display semibold
``` React: ```jsx import React from 'react'; const TextExample4Demo = () => ( <>
Base regular
Base bold
Display bold
Display semibold
); export default TextExample4Demo; ``` Angular: ```html
Base regular
Base bold
Display bold
Display semibold
``` ### 5. Text Showcase — Text Alignment HTML: ```html
Text Start
Text Center
Text End
``` React: ```jsx import React from 'react'; const TextExample5Demo = () => ( <>
Text Start
Text Center
Text End
); export default TextExample5Demo; ``` Angular: ```html
Text Start
Text Center
Text End
``` ### 6. Text Showcase — Text Decoration HTML: ```html
Underline Text
Line Through Text
No Underline Text
``` React: ```jsx import React from 'react'; const TextExample6Demo = () => ( <>
Underline Text
Line Through Text
No Underline Text
); export default TextExample6Demo; ``` Angular: ```html
Underline Text
Line Through Text
No Underline Text
``` ### 7. Text Showcase — Wrapping & Truncate HTML: ```html
This is a long text that will eventually be truncated with an ellipsis.
This text will not wrap.
``` React: ```jsx import React from 'react'; const TextExample7Demo = () => ( <>
This is a long text that will eventually be truncated with an ellipsis.
This text will not wrap.
); export default TextExample7Demo; ``` Angular: ```html
This is a long text that will eventually be truncated with an ellipsis.
This text will not wrap.
``` ## CSS class reference The following CSS partials define the Text utility classes used in the examples above: ### typography.utilities.css ```css /* ===================================================== 1.0 GLOBAL RESET & BOX MODEL ===================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Base Typography Engines */ [class*="ux4g-fs-"]{font-size:var(--ux4g-fs-current) !important;} [class*="ux4g-lh-"]{line-height:var(--ux4g-lh-current) !important;} /* Font Size (Display + Body Scale) */ .ux4g-fs-60{--ux4g-fs-current:var(--ux4g-fs-60);} .ux4g-fs-52{--ux4g-fs-current:var(--ux4g-fs-52);} .ux4g-fs-40{--ux4g-fs-current:var(--ux4g-fs-40);} .ux4g-fs-36{--ux4g-fs-current:var(--ux4g-fs-36);} .ux4g-fs-32{--ux4g-fs-current:var(--ux4g-fs-32);} .ux4g-fs-28{--ux4g-fs-current:var(--ux4g-fs-28);} .ux4g-fs-24{--ux4g-fs-current:var(--ux4g-fs-24);} .ux4g-fs-20{--ux4g-fs-current:var(--ux4g-fs-20);} .ux4g-fs-18{--ux4g-fs-current:var(--ux4g-fs-18);} .ux4g-fs-16{--ux4g-fs-current:var(--ux4g-fs-16);} .ux4g-fs-14{--ux4g-fs-current:var(--ux4g-fs-14);} .ux4g-fs-12{--ux4g-fs-current:var(--ux4g-fs-12);} .ux4g-fs-11{--ux4g-fs-current:var(--ux4g-fs-11);} /* Line Height (FIXED naming consistency) */ .ux4g-lh-80{--ux4g-lh-current:var(--ux4g-lh-80);} .ux4g-lh-72{--ux4g-lh-current:var(--ux4g-lh-72);} .ux4g-lh-52{--ux4g-lh-current:var(--ux4g-lh-52);} .ux4g-lh-44{--ux4g-lh-current:var(--ux4g-lh-44);} .ux4g-lh-36{--ux4g-lh-current:var(--ux4g-lh-36);} .ux4g-lh-32{--ux4g-lh-current:var(--ux4g-lh-32);} .ux4g-lh-28{--ux4g-lh-current:var(--ux4g-lh-28);} .ux4g-lh-24{--ux4g-lh-current:var(--ux4g-lh-24);} .ux4g-lh-20{--ux4g-lh-current:var(--ux4g-lh-20);} .ux4g-lh-18{--ux4g-lh-current:var(--ux4g-lh-18);} .ux4g-lh-16{--ux4g-lh-current:var(--ux4g-lh-16);} .ux4g-lh-14{--ux4g-lh-current:var(--ux4g-lh-14);} ``` ### typescale.utilities.css ```css .ux4g-text, [class^="ux4g-display-"], [class^="ux4g-heading-"], [class^="ux4g-title-"], [class^="ux4g-body-"], [class^="ux4g-label-"], [class^="ux4g-breadcrumb-"], [class^="ux4g-tab-"] { font-size: var(--ux4g-fs-current); line-height: var(--ux4g-lh-current); font-weight: var(--ux4g-fw-current); font-family: var(--ux4g-ff-current, var(--ux4g-ff)); color: var(--ux4g-text-current, var(--ux4g-text-neutral-primary)); font-style: normal; } :root { --ux4g-text-default-color: var(--ux4g-text-neutral-primary); } /* ===================================================== DISPLAY ===================================================== */ .ux4g-display-l-default, .ux4g-display-l-strong { --ux4g-fs-current: var(--ux4g-fs-60); --ux4g-lh-current: var(--ux4g-lh-80); --ux4g-ff-current: var(--ux4g-ff-display); --ux4g-text-current: var(--ux4g-text-default-color); } .ux4g-display-l-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-l-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } .ux4g-display-m-default, .ux4g-display-m-strong { --ux4g-fs-current: var(--ux4g-fs-52); --ux4g-lh-current: var(--ux4g-lh-72); --ux4g-ff-current: var(--ux4g-ff-display); --ux4g-text-current: var(--ux4g-text-default-color); } .ux4g-display-m-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-m-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } .ux4g-display-s-default, .ux4g-display-s-strong { --ux4g-fs-current: var(--ux4g-fs-40); --ux4g-lh-current: var(--ux4g-lh-52); --ux4g-ff-current: var(--ux4g-ff-display); } .ux4g-display-s-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-s-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } .ux4g-display-xs-default, .ux4g-display-xs-strong { --ux4g-fs-current: var(--ux4g-fs-36); --ux4g-lh-current: var(--ux4g-lh-44); --ux4g-ff-current: var(--ux4g-ff-display); } .ux4g-display-xs-default { --ux4g-fw-current: var(--ux4g-fw-display-semibold); } .ux4g-display-xs-strong { --ux4g-fw-current: var(--ux4g-fw-display-bold); } /* ===================================================== HEADING ===================================================== */ .ux4g-heading-2xl-default, .ux4g-heading-2xl-strong { --ux4g-fs-current: var(--ux4g-fs-40); --ux4g-lh-current: var(--ux4g-lh-44); } .ux4g-heading-2xl-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-2xl-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-xl-default, .ux4g-heading-xl-strong { --ux4g-fs-current: var(--ux4g-fs-32); --ux4g-lh-current: var(--ux4g-lh-36); } .ux4g-heading-xl-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-xl-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-l-default, .ux4g-heading-l-strong { --ux4g-fs-current: var(--ux4g-fs-28); --ux4g-lh-current: var(--ux4g-lh-32); } .ux4g-heading-l-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-l-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-m-default, .ux4g-heading-m-strong { --ux4g-fs-current: var(--ux4g-fs-24); --ux4g-lh-current: var(--ux4g-lh-28); } .ux4g-heading-m-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-m-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-s-default, .ux4g-heading-s-strong { --ux4g-fs-current: var(--ux4g-fs-20); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-heading-s-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-s-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-xs-default, .ux4g-heading-xs-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-heading-xs-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-xs-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-heading-2xs-default, .ux4g-heading-2xs-strong { --ux4g-fs-current: var(--ux4g-fs-14); --ux4g-lh-current: var(--ux4g-lh-16); } .ux4g-heading-2xs-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-heading-2xs-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } /* ===================================================== TITLE ===================================================== */ .ux4g-title-l-default, .ux4g-title-l-strong { --ux4g-fs-current: var(--ux4g-fs-24); --ux4g-lh-current: var(--ux4g-lh-28); } .ux4g-title-l-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-title-l-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-title-m-default, .ux4g-title-m-strong { --ux4g-fs-current: var(--ux4g-fs-20); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-title-m-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-title-m-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-title-s-default, .ux4g-title-s-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-title-s-default { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-title-s-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } /* ===================================================== BODY ===================================================== */ .ux4g-body-l-default, .ux4g-body-l-strong { --ux4g-fs-current: var(--ux4g-fs-18); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-body-l-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-l-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-body-m-default, .ux4g-body-m-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-24); } .ux4g-body-m-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-m-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-body-s-default, .ux4g-body-s-strong { --ux4g-fs-current: var(--ux4g-fs-14); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-body-s-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-s-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } .ux4g-body-xs-default, .ux4g-body-xs-strong { --ux4g-fs-current: var(--ux4g-fs-12); --ux4g-lh-current: var(--ux4g-lh-16); } .ux4g-body-xs-default { --ux4g-fw-current: var(--ux4g-fw-regular); } .ux4g-body-xs-strong { --ux4g-fw-current: var(--ux4g-fw-semibold); } /* ===================================================== LABEL ===================================================== */ .ux4g-label-xl-default, .ux4g-label-xl-strong { --ux4g-fs-current: var(--ux4g-fs-16); --ux4g-lh-current: var(--ux4g-lh-20); } .ux4g-label-xl-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-xl-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-label-l-default, .ux4g-label-l-strong { --ux4g-fs-current: var(--ux4g-fs-14); --ux4g-lh-current: var(--ux4g-lh-18); } .ux4g-label-l-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-l-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-label-m-default, .ux4g-label-m-strong { --ux4g-fs-current: var(--ux4g-fs-12); --ux4g-lh-current: var(--ux4g-lh-16); } .ux4g-label-m-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-m-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } .ux4g-label-s-default, .ux4g-label-s-strong { --ux4g-fs-current: var(--ux4g-fs-11); --ux4g-lh-current: var(--ux4g-lh-14); } .ux4g-label-s-default { --ux4g-fw-current: var(--ux4g-fw-medium); } .ux4g-label-s-strong { --ux4g-fw-current: var(--ux4g-fw-bold); } /* ===================================================== RESPONSIVE LABEL OVERRIDES ===================================================== */ @media (max-width: 768px) { .ux4g-label-m-default { --ux4g-fs-current: var(--ux4g-fs-11); --ux4g-lh-current: var(--ux4g-lh-14); } } ``` ### text-transform.utilities.css ```css /* ========================================= TEXT UTILITIES Controls appearance and behavior of text. 1. Font Weight 2. Font Family 3. Alignment 4. Wrapping & Break 5. Transform ========================================= */ /* Base Typography Engines */ [class*="ux4g-fw-"]{font-weight:var(--ux4g-fw-current) !important;} [class*="ux4g-ff-"]{font-family:var(--ux4g-ff-current, var(--ux4g-ff)) !important;} /* 1.0 Font Weight */ .ux4g-fw-regular{--ux4g-fw-current:var(--ux4g-fw-regular);} .ux4g-fw-medium{--ux4g-fw-current:var(--ux4g-fw-medium);} .ux4g-fw-semibold{--ux4g-fw-current:var(--ux4g-fw-semibold);} .ux4g-fw-bold{--ux4g-fw-current:var(--ux4g-fw-bold) !important;} .ux4g-fw-d-semibold{--ux4g-fw-current:var(--ux4g-fw-display-semibold);} .ux4g-fw-d-bold{--ux4g-fw-current:var(--ux4g-fw-display-bold);} /* 2.0 Font Family */ .ux4g-ff-base{--ux4g-ff-current:var(--ux4g-ff);} .ux4g-ff-display{--ux4g-ff-current:var(--ux4g-ff-display);} /* 3.0 Text Alignment (RTL Safe) */ .ux4g-text-start{text-align:start;} .ux4g-text-center{text-align:center;} .ux4g-text-end{text-align:end;} /* 4.0 Text Wrapping */ .ux4g-text-wrap{white-space:normal;} .ux4g-text-nowrap{white-space:nowrap !important;} /* 4.1 Word Break */ .ux4g-text-break{overflow-wrap:break-word;word-break:break-word;} /* 5.0 Text Transform */ .ux4g-text-lowercase{text-transform:var(--ux4g-tt-lowercase);} .ux4g-text-uppercase{text-transform:var(--ux4g-tt-uppercase);} .ux4g-text-capitalize{text-transform:var(--ux4g-tt-capitalize);} .ux4g-text-none {text-transform: var(--ux4g-text-transform-none);} /* 6.0 Text Decoration */ .ux4g-text-underline { text-decoration: underline !important; } .ux4g-text-line-through { text-decoration: line-through !important; } .ux4g-text-no-underline { text-decoration: none !important; } /* 7.0 List Styles */ .ux4g-list-none { list-style: none !important; padding: 0 !important; margin: 0 !important; } .ux4g-list-disc { list-style: disc !important; padding-inline-start: 1.5rem !important; } .ux4g-list-decimal { list-style: decimal !important; padding-inline-start: 1.5rem !important; } /* 8.0 Text Overflow & Truncate */ .ux4g-text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } ``` ### vertical-align.utilities.css ```css /* Vertical Align Utilities */ .ux4g-va-baseline { vertical-align: var(--ux4g-va-baseline); } .ux4g-va-top { vertical-align: var(--ux4g-va-top); } .ux4g-va-middle { vertical-align: var(--ux4g-va-middle); } .ux4g-va-bottom { vertical-align: var(--ux4g-va-bottom); } .ux4g-va-text-top { vertical-align: var(--ux4g-va-text-top); } .ux4g-va-text-bottom { vertical-align: var(--ux4g-va-text-bottom); } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.