Added Complex section

I've added a new section called **Complex** to the **Stepper** component to demonstrate how this component can be used in different scenarios.

This is possible as part of: twbs#42165

Author: pricop

site/src/content/docs/components/stepper.mdx

@@ -65,6 +65,24 @@ Wrap your horizontal stepper in a `.stepper-overflow` container to enable horizo
     </ol>
   </div>`} />
 
+### Complex
+
+You can include richer content inside each step to provide additional context, guidance, or visual hierarchy, allowing steps to contain supporting descriptions, helper text, status indicators, or other decorative elements.
+
+<Example code={`<ol class="stepper stepper-horizontal w-100">
+    <li class="stepper-item active"><div><div class="fw-semibold">Create</div><div class="small fg-secondary">Create an account.</div></div></li>
+    <li class="stepper-item active"><div><div class="fw-semibold">Confirm</div><div class="small fg-secondary">Confirm your email.</div></div></li>
+    <li class="stepper-item"><div><div class="fw-semibold">Set-up</div><div class="small fg-secondary">Configure your profile.</div></div></li>
+    <li class="stepper-item"><div><div class="fw-semibold">Finish</div><div class="small fg-secondary">Welcome aboard!</div></div></li>
+  </ol>`} />
+
+<Example code={`<ol class="stepper stepper-horizontal w-100">
+    <li class="stepper-item theme-success active"><div><div>Create account</div><div class="badge badge-subtle theme-success">Complete</div></div></li>
+    <li class="stepper-item active"><div><div>Confirm email</div><div class="badge badge-subtle theme-primary">In-progress</div></div></li>
+    <li class="stepper-item"><div><div>Update profile</div><div class="badge badge-subtle theme-secondary">Pending</div></div></li>
+    <li class="stepper-item"><div><div>Finish</div><div class="badge badge-subtle theme-secondary">Pending</div></div></li>
+  </ol>`} />
+
 ## Playground
 
 Experiment with stepper options including orientation, breakpoints, step count, and more.