Typography

Panda provides utilities and style properties for styling text.

Font Properties

<div className={css({ fontFamily: 'mono' })} />

Line Clamp (Truncation)

How to truncate multi-line text

<div className={css({ lineClamp: 2 })}>Some long piece of text</div>
 
<div className={css({ lineClamp: 2 })}>Truncated text</div>

Text Styles

Utilities for applying a composition of typography properties.

<h1
  className={css({
    textStyle: 'heading/marketing'
  })}
>
  Hello World
</h1>

Full reference

Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.