Section

Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.

Anchor to propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: A label used to describe the section that will be announced by assistive technologies.

When no heading property is provided or included as a children of the Section, you must provide an accessibilityLabel to describe the Section. This is important as it allows assistive technologies to provide the right context to users.
Anchor to heading heading string: A title that describes the content of the section.
Anchor to padding padding "base" | "none": Adjust the padding of all edges.

base: applies padding that is appropriate for the element. Note that it may result in no padding if this is the right design decision in a particular context.

none: removes all padding from the element. This can be useful when elements inside the Section need to span to the edge of the Section. For example, a full-width image. In this case, rely on s-box with a padding of 'base' to bring back the desired padding for the rest of the content.

Section

accessibilityLabel
A label used to describe the section that will be announced by assistive technologies. When no `heading` property is provided or included as a children of the Section, you **must** provide an `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide the right context to users.
```
string
```
adoptedCallback
```
() => void
```
attributeChangedCallback
```
(name: string) => void
```
click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
```
({ sourceEvent }?: ClickOptions) => void
```
connectedCallback
```
() => void
```
disconnectedCallback
```
() => void
```
heading
A title that describes the content of the section.
```
string
```
padding
Adjust the padding of all edges. - `base`: applies padding that is appropriate for the element. Note that it may result in no padding if this is the right design decision in a particular context. - `none`: removes all padding from the element. This can be useful when elements inside the Section need to span to the edge of the Section. For example, a full-width image. In this case, rely on `s-box` with a padding of 'base' to bring back the desired padding for the rest of the content.
```
"base" | "none"
```
queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
```
() => void
```
setAttribute
```
(name: string, value: string) => void
```

declare class Section extends PreactCustomElement implements SectionProps {
  constructor();
  /** @private */
  connectedCallback(): void;
  accessor accessibilityLabel: SectionProps['accessibilityLabel'];
  accessor heading: SectionProps['heading'];
  accessor padding: SectionProps['padding'];
}

ClickOptions

sourceEvent
The event you want to influence the synthetic click.
```
ActivationEventEsque
```

export interface ClickOptions {
  /**
   * The event you want to influence the synthetic click.
   */
  sourceEvent?: ActivationEventEsque;
}

ActivationEventEsque

button
```
number
```
ctrlKey
```
boolean
```
metaKey
```
boolean
```
shiftKey
```
boolean
```

export interface ActivationEventEsque {
  shiftKey: boolean;
  metaKey: boolean;
  ctrlKey: boolean;
  button: number;
}

Was this section helpful?

Code

<s-section heading="Online store dashboard">

<s-paragraph>View a summary of your online store’s performance.</s-paragraph>

</s-section>

examples

Code

<s-section heading="Online store dashboard">
  <s-paragraph>View a summary of your online store’s performance.</s-paragraph>
</s-section>

<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; background: #F1F1F1;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-section heading="Online store dashboard">
  <s-paragraph>View a summary of your online store’s performance.</s-paragraph>
</s-section>
</body></html>

Preview

Anchor to useful-forUseful for

Organizing your page in a logical structure based on nesting levels.
Creating consistency across pages.

Was this section helpful?

Anchor to considerationsConsiderations

When adding headings inside sections they automatically use a specific style, which helps keep the content organized and clear.
Built-in spacing is added between nested sections, as well as between heading and content.
Level 1: Display as responsive cards with background color, rounded corners, and shadow effects. Includes outer padding that can be removed when content like s-table needs to expand to the full width of the section.
Nested sections: Don't have any background color or effects by default.

Was this section helpful?