Nested Lists ❺
Add nested lists to Webflow's rich text elements
- Easily indicate nesting depth by prefixing list items with
>’s. - Supports both ordered ( OL ) and unordered ( UL ) lists.
- Compatible with editor mode.
- Additionally prefix items with
+or-for special PRO and CON lists - Themes support -
default,modern,fun
To indent list items, simply prefix the list items with
> to indicate the depth. We recommend you do not skip levels.Markup example
Published example
In the editor, this will look like;
- Top level
- > Indented one level
- >> Indented two levels
- >> Also indented two levels
- > Indented one level
In the published site, this will render as;
- Top level
- Indented one level
- Indented two levels
- Also indented two levels
- Indented one level
To specially identify an item as a PRO or a CON, prefix it with a + or a - just after any indentation markers. The appearance, coloring and icon used will depend on the theme.
With SA5, we've made some structural changes, to enforce semantically valid HTML5 even when list levels are skipped, e.g. level 1 to level 3. This creates strange layout complications due to the fact that there is an empty LI element to contain each nested list properly. We recommend you avoid skipping levels.
See here for a demonstration of nested lists and the markup we use;
Rich Text
Demonstration Page
100% NOCODE
All aspects of this feature are attributes-based for your convenience.
See above.