Skip to main content

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 connectedCallback connectedCallback () => void
Anchor to disconnectedCallback disconnectedCallback () => void
Anchor to heading heading string: The main page heading
Anchor to inlineSize inlineSize "small" | "base" | "large": 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 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>

Preview