diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx
index 40fe78b1..784f118d 100644
--- a/docs/src/pages/components/OrderedList.svx
+++ b/docs/src/pages/components/OrderedList.svx
@@ -7,14 +7,18 @@ components: ["OrderedList", "ListItem"]
import Preview from "../../components/Preview.svelte";
+`OrderedList` provides a structured way to display numbered lists of items. It supports nested lists, native browser styles, and expressive typography for enhanced visual hierarchy.
+
Consider using the RecursiveList component for rendering tree structured data.
-
+
## Default
+Create a basic ordered list by wrapping `ListItem` components within `OrderedList`.
+
Ordered list itemOrdered list item
@@ -23,6 +27,8 @@ components: ["OrderedList", "ListItem"]
## With links
+Add interactive elements like `Link` components within list items.
+
Ordered list item
@@ -37,6 +43,8 @@ components: ["OrderedList", "ListItem"]
## Nested
+Set the `nested` prop to `true` to create hierarchical lists with proper indentation and numbering.
+
Ordered list level 1
@@ -57,7 +65,7 @@ components: ["OrderedList", "ListItem"]
## Native list styles
-Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.
+Enable native browser list styles by setting the `native` prop to `true`. This is useful for large lists where the list number may overlap with the list item text.
@@ -79,7 +87,7 @@ Use the `native` attribute to enable default browser list styles. This is useful
## Expressive styles
-Set `expressive` to `true` to use Carbon's expressive typesetting.
+Use Carbon's expressive typesetting by setting the `expressive` prop to `true`.
Ordered list item