Text Transform

Transform text case

Syntax

visual="[transform-value]"

Values

Value	CSS Output	Description
uppercase	text-transform: uppercase	All uppercase
lowercase	text-transform: lowercase	All lowercase
capitalize	text-transform: capitalize	Capitalize words
normal-case	text-transform: none	Normal case

Examples

<span visual="uppercase">Uppercase text</span>

Preview

Text Transform

visual="uppercase" - Change text case

upperLOWERcapitalize me

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small uppercase">upper</span>
  <span space="p:small" visual="bg:primary text:white rounded:small lowercase">LOWER</span>
  <span space="p:small" visual="bg:primary text:white rounded:small capitalize">capitalize me</span>
</div>