SSection <s-section>

Groups related content, with an optional heading, subheading and actions. SSection is the typed Vue 3 wrapper for Shopify's Polaris <s-section> web component.

import { SSection } from 'polaris-vue-elements'

Best practices

• Group content that belongs together. Give every section a single, coherent job, whether that's related information or related controls; it then works as a visual container and adds meaning to the page structure.
• Write descriptive headings. Merchants skim the heading to find their way, so state what's inside rather than falling back on a generic title.
• Nest only as deep as the content needs. A nested section affects the heading hierarchy and the outline of the page rather than how it looks. Keep it to two or three levels at most, and nest only when the extra structure makes the content clearer.
• Drop the padding when content should span edge to edge. Use padding="none" for things like tables or images that ought to fill the section, then check that the inner content keeps enough spacing of its own.
• Add an accessibilityLabel when the heading isn't enough. When the on-screen heading leaves the section's purpose unclear for people using screen readers, give them a label that fills in the missing context.
• Pick the right header slot. Put details that modify the heading itself, like a tooltip or a count, in accessory. Put information about the section as a whole, like a status badge, in supplemental. Actions such as a button or menu belong in accessory, since supplemental doesn't take them.

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

See Shopify's best practices for <s-section> for the full guidance.

Example

123 Main Street, Ottawa, ON, CanadaDelivery instructions: leave at front door.

<script setup>
import { SSection, SParagraph, SDivider } from 'polaris-vue-elements'
</script>

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
heading	string	The heading text displayed at the top of the section. This heading provides a title for the section's content and automatically uses the appropriate semantic heading level (h2, h3, h4) based on nesting depth to maintain proper document structure.
padding	"base" | "none"	The padding applied to all edges of the element's content. - base: applies padding that is appropriate for the element. Note that it might result in no padding if this is the right design decision in a particular context. - none: removes all padding from the element's content. 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. The heading and header actions keep their padding, so they can be combined with none.
subheading	string	Supporting text that expands on the heading, rendered beneath it in a subdued treatment. This is not a heading: it adds no entry to the document outline, doesn't change the heading level of the section's children, and isn't announced as part of the heading. Keep whatever distinguishes this section from another in heading, since that is what someone navigating by heading hears.

Slots

Slot	Description
default	The content displayed within the section component, which groups related elements together in a logical unit with an optional heading.
accessory	Additional contextual information that qualifies the heading, rendered inline beside the heading text. Only accepts Badge, Icon, Button, Menu, Text, Avatar, Thumbnail, and Tooltip elements. Text must use tone, fontSize, and fontWeight of auto; Icon, Avatar, and Thumbnail must use size="base"; Badge must use size="base" and color="base"; Button must use inlineSize="auto". A Tooltip an accessory element's interestFor points at can be slotted here beside it.
graphic	A decorative visual that reinforces the heading, rendered before it. Accepts a single Icon with a size of base, or an icon-only Badge (icon set, no text content) with a size of large. The heading identifies the section, so this content is not announced by assistive technologies, and it is not rendered at all when the section has no heading.
primary-action	The primary action button or link, representing the main or most important action available in this context. Typically displayed with higher visual prominence than secondary actions to establish clear hierarchy.
secondary-actions	Additional action buttons or links that provide alternative or supporting actions. Visually de-emphasized compared to the primary action. A ButtonGroup holding an action and the icon-only activator for its Menu renders as one segmented group with a chevron activator. The group needs an accessibilityLabel, and must hold exactly one Button with text followed by one Button with no text that has an accessibilityLabel and a commandFor opening a Menu, both with a variant of secondary or auto.
supplemental	Status or metadata that describes the section as a whole rather than qualifying its heading, rendered at the inline-end of the header before any actions. This is not an action. Only accepts Badge, Avatar, Text, Icon, Thumbnail, and Tooltip elements, under the same prop constraints as accessory.