Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Text

View in Lexicon

  • Sizes
    • Sass API
  • Weights
  • Styles
  • Alignment
  • Wrap
  • Transform
  • Miscellaneous

Sizes

Utility classes for changing the font-size of text.

Utility Rem Px Example
text-11 2.5rem 40px The quick brown fox jumped over the lazy dog.
text-10 2.25rem 36px The quick brown fox jumped over the lazy dog.
text-9 2rem 32px The quick brown fox jumped over the lazy dog.
text-8 1.75rem 28px The quick brown fox jumped over the lazy dog.
text-7 1.5rem 24px The quick brown fox jumped over the lazy dog.
text-6 1.25rem 20px The quick brown fox jumped over the lazy dog.
text-5 1.125rem 18px The quick brown fox jumped over the lazy dog.
text-4 1rem 16px The quick brown fox jumped over the lazy dog.
text-3 0.875rem 14px The quick brown fox jumped over the lazy dog.
text-2 0.75rem 12px The quick brown fox jumped over the lazy dog.
text-1 0.625rem 10px The quick brown fox jumped over the lazy dog.
Copied!
Code Sample (expand to see it)
<span class="text-11">The quick brown fox jumped over the lazy dog.</span>
<span class="text-10">The quick brown fox jumped over the lazy dog.</span>
<span class="text-9">The quick brown fox jumped over the lazy dog.</span>
<span class="text-8">The quick brown fox jumped over the lazy dog.</span>
<span class="text-7">The quick brown fox jumped over the lazy dog.</span>
<span class="text-6">The quick brown fox jumped over the lazy dog.</span>
<span class="text-5">The quick brown fox jumped over the lazy dog.</span>
<span class="text-4">The quick brown fox jumped over the lazy dog.</span>
<span class="text-3">The quick brown fox jumped over the lazy dog.</span>
<span class="text-2">The quick brown fox jumped over the lazy dog.</span>
<span class="text-1">The quick brown fox jumped over the lazy dog.</span>

Text Sizes Sass API

The map $font-sizes allows generating any number of text size variants. If a key starts with ., # or %, Clay will output it as is, otherwise we will prepend . to the key (e.g., .text-100).

Copied!
Code Sample (expand to see it)
$bg-theme-colors: (
    text-100: (
        font-size: 100px,
    ),
    '%text-200': (
        font-size: 200px,
    ),
    '.text-200': (
        extend: '%text-200',
    ),
    '.text-250': (
        extend: '%text-200',
    ),
);

Outputs:

Copied!
Code Sample (expand to see it)
.text-100 {
    font-size: 100px;
}

.text-200, .text-250 {
    font-size: 200px;
}

Weights

Utility classes for changing the font-weight of text.

Utility Value Example
text-weight-lighter lighter The quick brown fox jumped over the lazy dog.
text-weight-light 300 The quick brown fox jumped over the lazy dog.
text-weight-normal 400 The quick brown fox jumped over the lazy dog.
text-weight-semi-bold 500 The quick brown fox jumped over the lazy dog.
text-weight-bold 700 The quick brown fox jumped over the lazy dog.
text-weight-bolder 900 The quick brown fox jumped over the lazy dog.
Copied!
Code Sample (expand to see it)
<span class="text-weight-lighter"
	>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-light"
	>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-normal"
	>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-semi-bold"
	>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-bold"
	>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-bolder"
	>The quick brown fox jumped over the lazy dog.</span
>

Styles

Utility classes for changing the font-style of text.

Utility Value Example
text-italic italic The quick brown fox jumped over the lazy dog.
text-monospace SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace The quick brown fox jumped over the lazy dog.
Copied!
Code Sample (expand to see it)
<span class="text-italic">The quick brown fox jumped over the lazy dog.</span>
<span class="text-monospace"
	>The quick brown fox jumped over the lazy dog.</span
>

Alignment

Text Alignment Utilities set the text-align property. Only the left, right, and center values have responsive alignment, use the format text-{sm|md|lg|xl}-{left|right|center} to target specific screen sizes (e.g., text-md-center).

Utility Value
text-justify justify
text-left left
text-right right
text-center center

Wrap

Text Wrap Utilities set the white-space property.

Utility Value
text-wrap normal
text-nowrap nowrap

Transform

Text Transform Utilities set the text-transform property.

Utility Value
text-lowercase lowercase
text-uppercase uppercase
text-capitalize capitalize

Miscellaneous

Utility Value
text-hide background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
text-decoration-none text-decoration: none !important;
text-break overflow-wrap: break-word !important;
word-wrap: break-word !important;

How can this be improved? Create an issue!