Text Transform

Utilities for controlling the transformation of text.

Normal Case

Use the textTransform="none" utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

<x.p textTransform="none">
  Computers have lots of memory but no imagination.
</x.p>

Uppercase

Use the textTransform="uppercase" utility to uppercase text.

<x.p textTransform="uppercase">
  Computers have lots of memory but no imagination.
</x.p>

Lowercase

Use the textTransform="lowercase" utility to lowercase text.

<x.p textTransform="lowercase">
  Computers have lots of memory but no imagination.
</x.p>

Capitalize

Use the textTransform="capitalize" utility to capitalize text.

<x.p textTransform="capitalize">
  Computers have lots of memory but no imagination.
</x.p>

Responsive

To control the text transformation of an element at a specific breakpoint, use responsive object notation. For example, adding the property textTransform={{ md: "uppercase" }} to an element would apply the textTransform="uppercase" utility at medium screen sizes and above.

<x.div textTransform={{ md: 'uppercase' }}>{/* ... */}</x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.