Skip to content

SOrderedList <s-ordered-list>

ts
import { SOrderedList } from 'polaris-vue-elements'

Example

Free shipping over $5030-day returns24/7 customer supportAdd items to your cartReview your orderConfirm and check out
vue
<script setup>
import { SUnorderedList, SOrderedList, SListItem, SStack } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large-500" alignItems="start">
    <SUnorderedList>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <!-- SOrderedList renders its SListItem children as a numbered list. -->
    <SOrderedList>
      <SListItem>Add items to your cart</SListItem>
      <SListItem>Review your order</SListItem>
      <SListItem>Confirm and check out</SListItem>
    </SOrderedList>
  </SStack>
</template>

Props

PropTypeDescription
childrenanyThe content of the OrderededList. Accepts only ListItem components.
idstring | undefinedA unique identifier for the element.

Slots

SlotDescription
defaultThe items of the OrderedList. Only ListItems are accepted.