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

yarn add @clayui/core

Text represent a single text line without semantic meaning.

  • Examples
  • API

Beta3.85.0CHANGELOGstorybook demos

  • Introduction
  • Size
  • As API
  • Font Styles
    • Italic
    • Truncate
    • Monospace
  • Color
  • Font Weights

Introduction

Text is a component that represents a single text line without semantic meaning like a Button. Text can also provide its styles using its props like italic, truncate, monospace, color, weight and size.

Size

The same way as Heading, Text provides its own font size level from 1 to 11 just indicating it in the property size. The default font size is 4.

Copied!
Code Sample (expand to see it)

As API

The HTML tag of this component can be chosen to ensure that the semantics of the text are representative. Text provides a property that allows to display the component depending on the user election. It can be displayed as p or span tag providing a block element or a inline one.

<Text as="p">
    Text using paragraph
</Text>
<Text as="span">
    Text using span
</Text>

Font Styles

Italic

Likewise, Text provides a new property that allows you change the font weight of text in italic form.

Copied!
Code Sample (expand to see it)

Truncate

If you want to shortening Text content because it doesn't fit the layout correctly, you can use truncate property.

Copied!
Code Sample (expand to see it)

Monospace

Text provides a property which sets a font whose letters and characters each occupy the same amount of horizontal space, which is monospace.

Copied!
Code Sample (expand to see it)

Color

Text has the ability to apply different color fonts giving emphasis to the text, you can check here. Notice that is not recommended on light backgrounds due to contrast issues around light text.

Copied!
Code Sample (expand to see it)

Font Weights

As well as Heading, Text provides its own font weight styles from bolder to lighter just indicating it in the property weight. The default font weight is normal.

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!