GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Text transform

The text transform class sets the text-transform property. It controls the capitalization patterns of text. Overview
CSS Shortcut class Applied style 
text-capitalize
 
text-transform: capitalize;
 
text-lowercase
 
text-transform: lowercase;
 
text-uppercase
 
text-transform: uppercase;
 
text-none
 
text-transform: none;

Examples

Capitalize
text-capitalize

This text has the first letter of each word capitalized. 

<p class="text-capitalize">
  This text has the first letter of each word capitalized.
</p>

Lowercase
text-lowercase

This text has all characters in lowercase. 

<p class="text-lowercase">
  This text has all characters in lowercase.
</p>

Uppercase
text-uppercase

This text has all characters in uppercase. 

<p class="text-uppercase">
  This text has all characters in uppercase.
</p>

None
text-none

This text is displayed as originally entered. Any text transformations are removed. 

<p class="text-none">
  This text is displayed as originally entered. Any text
  transformations are removed.
</p>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:text-capitalize ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01