Skip to content

Text

Display text using well-defined typographic styles.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

Note: This component is a work in progress. It is not being fully used across Vercel products.

Props

Props
Name
Type
Description
Default
childrenReactNodeThe content, duh.-
as
enum
The root element.p
size10 | 12 | 13 | 14 | 16 | 20 | 24 | 32 | 40 | 48The font size.14
lineHeight12 | 14 | 16 | 20 | 24 | 32 | 40 | 48 | 56The line height.-
weight100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900The font weight.-
transform"capitalize" | "uppercase" | "lowercase" | "initial"Text transform short hand.-
align"left" | "center" | "right"Text alignment short hand.-
color
enum
The text color. Strictly limited to colors of our design system.geist-foreground
truncatenumber | booleanTruncate a single or multiple line(s). If you pass truncate, make sure to pass `title` so that the full value is shown on hover.-
classNamestringThe root class name.-
styleCSSPropertiesThe root element inline styles.-
titlestringIf text is `truncated`, this should be the full text.-
wrapbooleanWhether the text should wrap linestrue
dangerouslySetInnerHTML{ __html: string; }See https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml-
monospacebooleanWhether to use the monospace font.false
idstringThe root element id-
htmlForstringThe html for prop available on "labels"-

Sizes

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

Code Editor

Weights

The Evil Rabbit jumps. (900)

The Evil Rabbit jumps. (800)

The Evil Rabbit jumps. (700)

The Evil Rabbit jumps. (600)

The Evil Rabbit jumps. (500)

The Evil Rabbit jumps. (400)

The Evil Rabbit jumps. (300)

The Evil Rabbit jumps. (200)

The Evil Rabbit jumps. (100)

Code Editor

Color

The Evil Rabbit jumps.

Code Editor

Modifiers

The Evil Rabbit jumpsover the quick brown fox Lawful Meerkat.

Code Editor

Polymorphic

<p> semantically, <h2> visually.

Code Editor

Truncate

The Evil Rabbit jumps.

Code Editor

Clamp

The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps. The Evil Rabbit jumps.

Code Editor

Align

The Evil Rabbit jumps.

The Evil Rabbit jumps.

The Evil Rabbit jumps.

Code Editor

Monospace Font

This is a sans-serif font.

This is a monospace font.

Code Editor

Unordered List

  • Static websites and static generators (React, Vue, Angular, etc)
  • Code that renders HTML on the server-side
  • API endpoints that query databases or web APIs and return dynamic data
Code Editor

Ordered List

  1. Push a commit to trigger the deployment.
  2. You'll see the deployment status on GitHub and Vercel dashboard.
Code Editor

Code

It’s a matter of running vercel to get it up and running instantly.

Code Editor

Codeblock

npm i vercel -g
vercel init nextjs
Code Editor