Layout

Box

Generic box container. Wraps the Polaris <s-box> web component.

Usage

<template>
  <ShBox padding="base" border-radius="base" background="bg-surface">
    <p>Content inside a box</p>
  </ShBox>
</template>

Prop	Type	Default	Description
`accessibilityRole`	`string`	—	ARIA role
`background`	`string`	—	Background color token
`blockSize`	`string`	—	Block size
`minBlockSize`	`string`	—	Minimum block size
`maxBlockSize`	`string`	—	Maximum block size
`inlineSize`	`string`	—	Inline size
`minInlineSize`	`string`	—	Minimum inline size
`maxInlineSize`	`string`	—	Maximum inline size
`overflow`	`'visible' \| 'hidden'`	—	Overflow behavior
`padding`	`string`	—	Padding on all sides
`paddingBlock`	`string`	—	Block-axis padding
`paddingBlockStart`	`string`	—	Block-start padding
`paddingBlockEnd`	`string`	—	Block-end padding
`paddingInline`	`string`	—	Inline-axis padding
`paddingInlineStart`	`string`	—	Inline-start padding
`paddingInlineEnd`	`string`	—	Inline-end padding
`border`	`string`	—	Border shorthand
`borderWidth`	`string`	—	Border width
`borderStyle`	`string`	—	Border style
`borderColor`	`string`	—	Border color token
`borderRadius`	`string`	—	Border radius
`accessibilityLabel`	`string`	—	Accessible label
`accessibilityVisibility`	`'visible' \| 'hidden' \| 'exclusive'`	—	Accessibility visibility
`display`	`string`	—	CSS display property

Slot	Description
`default`	Box content

Renders as <s-box>. See Polaris Box docs.

Page

Page container with heading. Wraps the Polaris <s-page> web component.

Stack

Stack layout for vertical or horizontal arrangement. Wraps the Polaris <s-stack> web component.