Skip to main content

Unordered list

The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning.

Unordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use ordered list.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to id
id
string

A unique identifier for the element.

Anchor to list itemList item

The list item component represents a single entry within an ordered list or unordered list. Use list item to structure individual points, steps, or items within a list, with each item automatically receiving appropriate list markers (bullets or numbers) from its parent list.

List item must be used as a direct child of ordered list or unordered list components. Each list item can contain text, inline formatting, or other components to create rich list content.

Anchor to id
id
string

A unique identifier for the element.

Examples
<s-unordered-list>
<s-list-item>Free shipping on orders over $50</s-list-item>
<s-list-item>30-day money-back guarantee</s-list-item>
<s-list-item>Secure payment processing</s-list-item>
</s-unordered-list>

Preview

Anchor to best-practicesBest Practices

  • Use s-unordered-list when you need to present a list of related items or options.
  • Each item in the list should be wrapped in a s-list-item component.
  • Keep list items concise and consistent in length when possible.
  • Use s-unordered-list for navigation menus, feature lists, or any collection of related items.
  • Consider using s-unordered-list when you want to present information in a clear, scannable format.
Was this page helpful?