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


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' })} />
PropCSS PropertyToken Category

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' })} />
PropCSS PropertyToken Category
start, insetStart, insetInlineStartinset-inline-startspacing
end , insetEnd, insetInlineEndinset-inline-endspacing
insetX, insetInlineinset-inlinespacing
insetY, insetBlockinset-inlinespacing

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` |