SSection <s-section>

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

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 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.
heading	string	A title that describes the content of the section.
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.

Slots

Slot	Description
default	The content of the Section.