Utilities

Layout

Panda provides style properties for styling layout of an element

Aspect Ratio

Use the aspectRatio utilities to set the desired aspect ratio of an element.

Values can reference the aspectRatios token category.

<div className={css({ aspectRatio: 'square' })} />

💡

This uses the native CSS property aspect-ratio which is might not supported in all browsers. Consider using the AspectRatio pattern instead

Position

Use the position utilities to set the position of an element.

<div className={css({ position: 'absolute' })} />
<div className={css({ pos: 'absolute' })} /> // shorthand

Top / Right / Bottom / Left

Use the top, right, bottom and left utilities to set the position of an element.

Values can reference the spacing token category.

<div className={css({ position: 'absolute', top: '0', left: '0' })} />

Prop	CSS Property	Token Category
`top`	`top`	`spacing`
`right`	`right`	`spacing`
`bottom`	`bottom`	`spacing`
`left`	`left`	`spacing`

Logical Properties

Use the inset{Start|End} utilities to set the position of an element based on the writing mode.

💡

For example, insetStart will set the left property in ltr mode and right in rtl mode.

<div className={css({ position: 'absolute', insetStart: '0' })} />

Prop	CSS Property	Token Category
`start`, `insetStart`, `insetInlineStart`	`inset-inline-start`	`spacing`
`end` , `insetEnd`, `insetInlineEnd`	`inset-inline-end`	`spacing`
`insetX`, `insetInline`	`inset-inline`	`spacing`
`insetY`, `insetBlock`	`inset-inline`	`spacing`

Container Query

You can define container names and sizes in your theme configuration and use them in your styles. Read more.

 
| Prop            | CSS Property    | Token Category   |
| --------------- | --------------- | ---------------- |
| `containerName` | `containerName` | `containerNames` |

Interactivity List