Utilities

Typography

Panda provides the following utilities or style properties for styling text.

Font Properties

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

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>

Prop	CSS Property	Token Category
`lineClamp`	`webkit-line-clamp`	none
`truncate`	`text-overflow`	none

Utilities for applying a composition of typography properties.

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

Prop	Config
`textStyle`	`textStyles`