Box

Examples

• Basic container

  Description

  Demonstrates creating a simple container with padding, base background, border, and rounded corners to group and highlight product information.

  jsx

  <s-box
    padding="base"
    background="base"
    borderWidth="base"
    borderColor="base"
    borderRadius="base"
  >
    <s-paragraph>Product information</s-paragraph>
  </s-box>
  

  html

  <s-box
    padding="base"
    background="base"
    borderWidth="base"
    borderColor="base"
    borderRadius="base"
  >
    <s-paragraph>Product information</s-paragraph>
  </s-box>
  

• Responsive shipping notice

  Description

  Illustrates using a box with responsive padding to create an adaptable container for shipping information that can adjust to different screen or container sizes.

  jsx

  <s-query-container>
    <s-box
      padding="@container (inline-size > 400px) base, large-200"
      background="base"
      borderWidth="base"
      borderColor="base"
    >
      <s-text>Your order will be processed within 2-3 business days</s-text>
    </s-box>
  </s-query-container>

  html

  <s-query-container>
    <s-box
      padding="@container (inline-size > 400px) base, large-200"
      background="base"
      borderWidth="base"
      borderColor="base"
    >
      <s-paragraph>Your order will be processed within 2-3 business days</s-paragraph>
    </s-box>
  </s-query-container>

• Accessible status messages

  Description

  Shows how to use boxes with ARIA roles and visibility controls to create semantic, screen-reader-friendly status and informational messages.

  jsx

  <s-stack gap="base">
    <s-box
      accessibilityRole="status"
      padding="base"
      background="strong"
      borderRadius="base"
    >
      <s-paragraph>Payment failed</s-paragraph>
    </s-box>
  
    <s-box accessibilityVisibility="exclusive">
      <s-paragraph>Price includes tax and shipping</s-paragraph>
    </s-box>
  </s-stack>
  

  html

  <s-stack gap="base">
    <s-box
      accessibilityRole="status"
      padding="base"
      background="strong"
      borderRadius="base"
    >
      <s-paragraph>Payment failed</s-paragraph>
    </s-box>
  
    <s-box accessibilityVisibility="exclusive">
      <s-paragraph>Price includes tax and shipping</s-paragraph>
    </s-box>
  </s-stack>
  

• Nested hierarchical containers

  Description

  Demonstrates creating nested, hierarchical layouts using multiple boxes, showing how boxes can be combined to organize related content sections with different styling.

  jsx

  <s-stack gap="base">
    {/* Inventory status section */}
    <s-box
      padding="base"
      background="base"
      borderRadius="base"
      borderWidth="base"
      borderColor="base"
    >
      <s-stack gap="base">
        <s-box padding="small-100" background="subdued" borderRadius="small">
          <s-paragraph>In stock: 45 units</s-paragraph>
        </s-box>
        <s-box padding="small-100" background="subdued" borderRadius="small">
          <s-paragraph>Low stock alert: 5 units</s-paragraph>
        </s-box>
      </s-stack>
    </s-box>
  
    {/* Product information section */}
    <s-box
      padding="base"
      background="base"
      borderRadius="base"
      borderWidth="base"
      borderColor="base"
    >
      <s-stack gap="base">
        <s-heading>Product sales</s-heading>
        <s-paragraph color="subdued">No recent sales of this product</s-paragraph>
        <s-link>View details</s-link>
      </s-stack>
    </s-box>
  </s-stack>
  

  html

  <s-stack gap="base">
    <!-- Inventory status section -->
    <s-box
      padding="base"
      background="base"
      borderRadius="base"
      borderWidth="base"
      borderColor="base"
    >
      <s-stack gap="base">
        <s-box padding="small-100" background="subdued" borderRadius="small">
          <s-paragraph>In stock: 45 units</s-paragraph>
        </s-box>
        <s-box padding="small-100" background="subdued" borderRadius="small">
          <s-paragraph>Low stock alert: 5 units</s-paragraph>
        </s-box>
      </s-stack>
    </s-box>
  
    <!-- Product information section -->
    <s-box
      padding="base"
      background="base"
      borderRadius="base"
      borderWidth="base"
      borderColor="base"
    >
      <s-stack gap="base">
        <s-heading>Product sales</s-heading>
        <s-paragraph color="subdued">No recent sales of this product</s-paragraph>
        <s-link>View details</s-link>
      </s-stack>
    </s-box>
  </s-stack>