Skip to main content

Box

Use s-box to create flexible layout containers with consistent spacing and styling. Box provides a foundation for building structured layouts.

Anchor to propertiesProperties

Anchor to blockSize
blockSize
<>
Default: 'auto'

Adjust the block size.

Anchor to inlineSize
inlineSize
<>
Default: 'auto'

Adjust the inline size.

Anchor to maxBlockSize
maxBlockSize
<>
Default: 'none'

Adjust the maximum block size.

Anchor to maxInlineSize
maxInlineSize
<>
Default: 'none'

Adjust the maximum inline size.

Anchor to minBlockSize
minBlockSize
<>
Default: '0'

Adjust the minimum block size.

Anchor to minInlineSize
minInlineSize
<>
Default: '0'

Adjust the minimum inline size.

Anchor to padding
padding
<>
Default: 'none'

Adjust the padding of all edges.

1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:

  • 4 values: block-start inline-end block-end inline-start
  • 3 values: block-start inline block-end
  • 2 values: block inline

For example:

  • large means block-start, inline-end, block-end and inline-start paddings are large.
  • large none means block-start and block-end paddings are large, inline-start and inline-end paddings are none.
  • large none large means block-start padding is large, inline-end padding is none, block-end padding is large and inline-start padding is none.
  • large none large small means block-start padding is large, inline-end padding is none, block-end padding is large and inline-start padding is small.

A padding value of auto will use the default padding for the closest container that has had its usual padding removed.

Anchor to paddingBlock
paddingBlock
<'' | >
Default: '' - meaning no override

Adjust the block-padding.

  • large none means block-start padding is large, block-end padding is none.

This overrides the block value of padding.

Anchor to paddingBlockEnd
paddingBlockEnd
'' |
Default: '' - meaning no override

Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

Anchor to paddingBlockStart
paddingBlockStart
'' |
Default: '' - meaning no override

Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

Anchor to paddingInline
paddingInline
<'' | >
Default: '' - meaning no override

Adjust the inline padding.

  • large none means inline-start padding is large, inline-end padding is none.

This overrides the inline value of padding.

Anchor to paddingInlineEnd
paddingInlineEnd
'' |
Default: '' - meaning no override

Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

Anchor to paddingInlineStart
paddingInlineStart
'' |
Default: '' - meaning no override

Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

Was this section helpful?

Code

<s-box>
<s-text>Content inside a box container</s-text>
</s-box>

Preview