Text List
A styled list component that renders as a bulleted list, a numbered list, or an inline flex row. Accepts diwa-text-list-item children.
When to use
Do
- ✓Use for any list of related items — features, steps, options, or attributes.
- ✓Use ordered for sequential procedures where the order matters.
- ✓Use unordered when order is irrelevant.
- ✓Use inline for compact, horizontal enumerations such as tags or related links.
- ✓Always fill the default slot with diwa-text-list-item elements.
Don't
- ✕Don't use diwa-text-list for navigation — use a nav element with anchor links.
- ✕Don't mix item types — all children should be diwa-text-list-item.
- ✕Don't use ordered lists when the numbering doesn't convey meaningful order.
- ✕Don't nest lists more than two levels deep — deeply nested lists are hard to scan.
- ✕Don't use the inline type for long item text — it's best for short labels or keywords.
Type guidance
unordered — Renders as <ul> with disc bullet markers. Use for groups where position does not imply priority or sequence.
ordered — Renders as <ol> with decimal numbers. Use for steps, priority rankings, or any enumeration where sequence matters.
inline — Renders as <ul> with list markers removed and a flex-row layout. Use for compact horizontal groups such as technology tags or applied filters.