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 primary-action
primary-action
HTMLElement

The primary action to perform on the page. Accepts a single Button with a variant of primary.

Anchor to secondary-actions
secondary-actions
HTMLElement

Secondary actions on the page. Accepts ButtonGroup with nested Buttons or a single Button. Buttons must have a variant of secondary or auto.

Was this section helpful?
<s-page>
<s-section>
<s-text>Hello World</s-text>
</s-section>
</s-page>

Preview