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.

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

Support
Targets (24)

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

Represents a single item within a list. Use only as a child of s-ordered-list or s-unordered-list components.

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 customers 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 bulleted list with items displayed as an unordered collection.

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 customers can scan the list quickly.
  • Limit nesting depth: Avoid deeply nested lists, as they become hard to scan on small account screens.
  • Keep descriptions consistent: Start each item with the same grammatical pattern so the list feels cohesive.
Was this page helpful?