Proxyclick Proxyclick logo Hello

Text utilities

Text size

Set the size and line-height of the text for the specified sizing scale.

Usage

u-text-[scale](@[breakpoint])
  • scale
    Id of the scale as detailled in the text sizes.
  • breakpoint (optional)
    Apply the utility from the specified breakpoint and larger.

Examples

This text is small (s)
u-text-s
This text is small (s) by default, and extra-large (xl) from medium breakpoint.
u-text-su-text-xl@medium

Line height

Set a line height as multiple of the base unit.

Usage

u-line-height-[multiple]u
  • multiple
    Multiple from 1 to 8 of the base unit.

Examples

This text has a line height
of 25px (5 x 5px).
u-line-height-5u
This text has a line height
of 40px (8 x 5px).
u-line-height-8u

Text weight

Set the weight of the text.

Usage

u-text-weight-[normal|medium|bold]

Examples

This text is normal
u-text-weight-normal
This text is medium
u-text-weight-medium
This text is bold
u-text-weight-bold

Uppercase

Set the text in uppercase.

Usage

u-text-uppercase

Examples

I'm caps locked
u-text-uppercase

Text nowrap

Prevent text from wrapping on multiple lines.

Usage

u-text-nowrap(@[breakpoint])
  • breakpoint (optional)
    Apply the utility from the specified breakpoint and larger.

Examples

This is a very long text that won't display on multiple lines if too long for its wrapping box. Resize your browser window to test this.
u-text-nowrap@medium

Text ellipsis

Manage overflowing text on a single line ending with …

Usage

u-text-ellipsis(@[breakpoint])
  • breakpoint (optional)
    Apply the utility from the specified breakpoint and larger.

Examples

This is a very long text that will be cut nicely is the screen isn't wide enough to display everything.
u-text-ellipsis

Text overflow

Reverse the effect of the text ellipsis utility.

Usage

u-text-overflow(@[breakpoint])
  • breakpoint (optional)
    Apply the utility from the specified breakpoint and larger.

Examples

This is a very long text that will be cut nicely on small screen, but will display entirely from medium breakpoint.
u-text-ellipsis u-text-overflow@medium