Bolt Design System

Text-transform Usage

<bolt-text> has a few options for transforming letter case. It can be adjusted for legibility. The default is regular.

This text has its text-transform prop defined as: regular

<bolt-text text-transform="regular">
  This text has its text-transform prop defined as: regular
</bolt-text>

This text has its text-transform prop defined as: uppercase

<bolt-text text-transform="uppercase">
  This text has its text-transform prop defined as: uppercase
</bolt-text>

This text has its text-transform prop defined as: lowercase

<bolt-text text-transform="lowercase">
  This text has its text-transform prop defined as: lowercase
</bolt-text>

This text has its text-transform prop defined as: capitalize

<bolt-text text-transform="capitalize">
  This text has its text-transform prop defined as: capitalize
</bolt-text>