Text

Utilities for controlling the all typography of an element.

React propsCSS Properties
text={size}Mixed

Usage

Text is similar to fontSize, except it also specify according lineHeight.

By extending theme, text can be used to define all text variants of your application.

xs
Computers have lots of memory but no imagination.
sm
Computers have lots of memory but no imagination.
base
Computers have lots of memory but no imagination.
lg
Computers have lots of memory but no imagination.
xl
Computers have lots of memory but no imagination.
2xl
Computers have lots of memory but no imagination.
3xl
Computers have lots of memory but no imagination.
4xl
Computers have lots of memory but no imagination.
5xl
Computers have lots of memory but no imagination.
6xl
Computers have lots of memory but no imagination.
7xl
Computers have lots of memory but no imagination.
8xl
Computers have lots of memory but no imagination.
9xl
Computers have lots of memory but no imagination.
<x.p text="xs">Computers have lots ...</x.p> <x.p text="sm">Computers have lots ...</x.p> <x.p text="base">Computers have lots ...</x.p> <x.p text="lg">Computers have lots ...</x.p> <x.p text="xl">Computers have lots ...</x.p> <x.p text="2xl">Computers have lots ...</x.p> <x.p text="3xl">Computers have lots ...</x.p> <x.p text="4xl">Computers have lots ...</x.p> <x.p text="5xl">Computers have lots ...</x.p> <x.p text="6xl">Computers have lots ...</x.p> <x.p text="7xl">Computers have lots ...</x.p> <x.p text="8xl">Computers have lots ...</x.p> <x.p text="9xl">Computers have lots ...</x.p>

Responsive

To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property text={{ md: "xl" }} to an element would apply the text="xl" utility at medium screen sizes and above.

<x.p text={{ xs: 'sm', md: 'xl' }}>{/* ... */}</x.p>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Texts

If you'd like to customize your values for texts, use the theme.texts section of your theme. Every typography utilities are authorized, not only fontSize and lineHeight. You can literally define all your texts style using this utility.

// theme.js export const theme = { texts: { title: { fontSize: '30px', lineHeight: '45px', fontWeight: 'bold' }, hint: { fontSize: 10, lineHeight: 1.4, color: 'gray-300', } }, }

If you don't want to customize it, a set of fontSizes is already defined in default theme:

const defaultTheme = { // ... fontSizes: { xs: { fontSize: 'xs', lineHeight: 'xs' }, sm: { fontSize: 'sm', lineHeight: 'sm' }, default: { fontSize: 'default', lineHeight: 'default' }, lg: { fontSize: 'lg', lineHeight: 'lg' }, xl: { fontSize: 'xl', lineHeight: 'xl' }, '2xl': { fontSize: '2xl', lineHeight: '2xl' }, '3xl': { fontSize: '3xl', lineHeight: '3xl' }, '4xl': { fontSize: '4xl', lineHeight: '4xl' }, '5xl': { fontSize: '5xl', lineHeight: '5xl' }, '6xl': { fontSize: '6xl', lineHeight: '6xl' }, '7xl': { fontSize: '7xl', lineHeight: '7xl' }, '8xl': { fontSize: '8xl', lineHeight: '8xl' }, '9xl': { fontSize: '9xl', lineHeight: '9xl' }, }, }

Values are defined in fontSizes and lineHeights theme section. It means if you modify a fontSize it will automatically reflects change on text and fontSize utility.

Edit this page on GitHub