Page

Use s-page as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.

Anchor to propertiesProperties

Use as the outer wrapper of a page

Anchor to heading heading string: The main page heading
Anchor to inlineSize inlineSize "small" | "base" | "large" Default: 'base': The inline size of the page

base corresponds to a set default inline size

large full width with whitespace

Was this section helpful?

Anchor to slotsSlots

Anchor to aside aside HTMLElement: The content to display in the aside section of the page.

This slot is only rendered when inlineSize is "base".
Anchor to breadcrumb-actions breadcrumb-actions HTMLElement: Navigations back actions for the page.

Only accepts Link components.
Anchor to children children HTMLElement: The content of the Page.
Anchor to primary-action primary-action HTMLElement: The primary action for the page.

Only accepts a single Button component with a variant of primary.
Anchor to secondary-actions secondary-actions HTMLElement: Secondary actions for the page.

Only accepts ButtonGroup and Button components with a variant of secondary or auto.

Was this section helpful?

<s-page heading="Products">

<s-section>

<s-text>Hello World</s-text>

</s-section>

</s-page>

Examples

jsx

<s-page heading="Products">
  <s-section>
    <s-text>Hello World</s-text>
  </s-section>
</s-page>

html

<s-page heading="Products">
  <s-section>
    <s-text>Hello World</s-text>
  </s-section>
</s-page>

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Anchor to example-page-with-headingPage with heading

Shows a page with a clear heading and descriptive text, illustrating how to use the page component with a title.

Anchor to example-small-inline-size-for-focused-contentSmall inline size for focused content

Illustrates a page with a small inline size, ideal for focused, compact content like settings or forms with minimal information.

Anchor to example-large-inline-size-for-wide-contentLarge inline size for wide content

Demonstrates a page with a large inline size, perfect for displaying broader content like analytics or dashboards with multiple information sections.

Anchor to example-page-with-breadcrumbs-and-titlePage with breadcrumbs and title

Shows a page with breadcrumb navigation and a descriptive heading, helping users understand their location in the navigation hierarchy.

Anchor to example-page-with-primary-and-secondary-actionsPage with primary and secondary actions

Demonstrates a page with a primary action button and secondary action buttons, showing how to provide main and related actions alongside the page heading.

Was this section helpful?

Page with heading

<s-page heading="Product catalog" inlineSize="base">

<s-section>

<s-text>Manage your product catalog and inventory.</s-text>

</s-section>

</s-page>

Examples

Page with heading

Description

Shows a page with a clear heading and descriptive text, illustrating how to use the page component with a title.

jsx

<s-page heading="Product catalog" inlineSize="base">
  <s-section>
    <s-text>Manage your product catalog and inventory.</s-text>
  </s-section>
</s-page>

html

<s-page heading="Product catalog" inline-size="base">
  <s-section>
    <s-text>Manage your product catalog and inventory.</s-text>
  </s-section>
</s-page>

Small inline size for focused content

Description

Illustrates a page with a small inline size, ideal for focused, compact content like settings or forms with minimal information.

jsx

<s-page heading="Store settings" inlineSize="small">
  <s-section>
    <s-stack gap="base">
      <s-text>Configure your basic store preferences.</s-text>
      <s-text-field label="Store name" />
      <s-button variant="primary">Save</s-button>
    </s-stack>
  </s-section>
</s-page>

html

<s-page heading="Store settings" inline-size="small">
  <s-section>
    <s-stack gap="base">
      <s-text>Configure your basic store preferences.</s-text>
      <s-text-field label="Store name"></s-text-field>
      <s-button variant="primary">Save</s-button>
    </s-stack>
  </s-section>
</s-page>

Large inline size for wide content

Description

Demonstrates a page with a large inline size, perfect for displaying broader content like analytics or dashboards with multiple information sections.

jsx

<s-page heading="Store analytics" inlineSize="large">
  <s-section>
    <s-stack gap="base">
      <s-text>Monitor your store performance across all channels.</s-text>
      <s-grid>
        <s-grid-item>
          <s-box
            padding="base"
            background="base"
            borderWidth="base"
            borderColor="base"
            borderRadius="base"
          >
            <s-heading>Sales</s-heading>
            <s-text type="strong">$12,456</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box
            padding="base"
            background="base"
            borderWidth="base"
            borderColor="base"
            borderRadius="base"
          >
            <s-heading>Orders</s-heading>
            <s-text type="strong">145</s-text>
          </s-box>
        </s-grid-item>
      </s-grid>
    </s-stack>
  </s-section>
</s-page>

html

<s-page heading="Store analytics" inline-size="large">
  <s-section>
    <s-stack gap="base">
      <s-text>Monitor your store performance across all channels.</s-text>
      <s-grid>
        <s-grid-item>
          <s-box
            padding="base"
            background="base"
            borderWidth="base"
            borderColor="base"
            borderRadius="base"
          >
            <s-heading>Sales</s-heading>
            <s-text type="strong">$12,456</s-text>
          </s-box>
        </s-grid-item>
        <s-grid-item>
          <s-box
            padding="base"
            background="base"
            borderWidth="base"
            borderColor="base"
            borderRadius="base"
          >
            <s-heading>Orders</s-heading>
            <s-text type="strong">145</s-text>
          </s-box>
        </s-grid-item>
      </s-grid>
    </s-stack>
  </s-section>
</s-page>

Page with breadcrumbs and title

Description

Shows a page with breadcrumb navigation and a descriptive heading, helping users understand their location in the navigation hierarchy.

jsx

<s-page heading="Edit Product" inlineSize="base">
  <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
  <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
  <s-section>
    <s-text>Update your product information and settings.</s-text>
  </s-section>
</s-page>

html

<s-page heading="Edit Product" inline-size="base">
  <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
  <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
  <s-section>
    <s-text>Update your product information and settings.</s-text>
  </s-section>
</s-page>

Page with primary and secondary actions

Description

Demonstrates a page with a primary action button and secondary action buttons, showing how to provide main and related actions alongside the page heading.

jsx

<s-page heading="Products" inlineSize="base">
  <s-button slot="secondary-actions">Preview</s-button>
  <s-button slot="secondary-actions">Duplicate</s-button>
  <s-button slot="primary-action" variant="primary">Save</s-button>
  <s-section>
    <s-text>Manage your products and organize your catalog.</s-text>
  </s-section>
</s-page>

html

<s-page heading="Products" inline-size="base">
  <s-button slot="secondary-actions">Preview</s-button>
  <s-button slot="secondary-actions">Duplicate</s-button>
  <s-button slot="primary-action" variant="primary">Save</s-button>
  <s-section>
    <s-text>Manage your products and organize your catalog.</s-text>
  </s-section>
</s-page>