Choose a version:

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.

List items must be direct children of s-unordered-list — wrapping them in other elements breaks bullet rendering.

Support

Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the unordered list component.

Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

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. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Display an unordered listDisplay an unordered list

Surface short incentives buyers can scan at a glance. This example renders three s-list-item entries inside s-unordered-list for perks like free shipping and easy returns.

Display an unordered list

A rendered example of the unordered-list component

html

<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>

Anchor to Display an unordered list with nested itemsDisplay an unordered list with nested items

Organize related items into groups using nested lists. This example nests s-unordered-list elements inside parent list items to break shipping options into domestic and international categories.

html

<s-unordered-list>

<s-list-item>Domestic shipping

<s-unordered-list>

<s-list-item>Standard: 5-7 business days</s-list-item>

<s-list-item>Express: 2-3 business days</s-list-item>

</s-unordered-list>

</s-list-item>

<s-list-item>International shipping

<s-unordered-list>

<s-list-item>Standard: 10-14 business days</s-list-item>

<s-list-item>Express: 5-7 business days</s-list-item>

</s-unordered-list>

</s-list-item>

</s-unordered-list>

Anchor to Best practicesBest practices

Keep items concise: Write short, parallel list items so buyers can scan the list quickly.
Limit nesting depth: Avoid deeply nested lists, as they become hard to scan on small checkout screens.
Keep descriptions consistent: Start each item with the same grammatical pattern so the list feels cohesive.

Was this page helpful?