List Wrapper

The list wrapper component allows for more complex HTML lists to be created while retaining the ability to input markdown content into list items. While the List wrapper is the recommended way of getting complex list outputs to keep markdown rendering more cleanly, a secondary option is also available to groups more experienced with raw HTML code.

Note: all code samples in this page have had short code < and > characters replaced with < and > to ensure that it is rendered correctly in preview. When using this code, these characters should be replaced.

Custom list (raw HTML using grid/div component)

Shortcode:

{{&lt; grid/div isMarkdown="false" &gt;}}
<ul>
    <li>
        Sample nested
        <ol style="list-style-type: lower-roman">
            <li>Sample content as shortcodes:</li>
            <ul style="list-style-type: circle">
                <li>Test 1</li>
                <li>Test 2</li>
            </ul>
            <li>Test 2</li>
            <li>
                <p>Sample content as markdown</p>
                <ul>
                    <li>Test</li>
                    <li>Test2</li>
                </ul>
            </li>
        </ol>
    </li>
    <li>Second bullet</li>
</ul>
{{&lt;/ grid/div &gt;}}

Output:

Sample nested
1. Sample content as shortcodes:
2. Test 2
3. Sample content as markdown
  - Test
  - Test2
Second bullet

Basic unordered list

Shortcode:

{{&lt; html/list_wrapper &gt;}}  
  {{&lt; html/li &gt;}}Test 1{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 2{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 3{{&lt;/ html/li &gt;}}  
{{&lt;/ html/list_wrapper &gt;}}

Test 1
Test 2
Test 3

Basic ordered list

Shortcode:

{{&lt; html/list_wrapper listType="ol" &gt;}}  
  {{&lt; html/li &gt;}}Test 1{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 2{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 3{{&lt;/ html/li &gt;}}  
{{&lt;/ html/list_wrapper &gt;}}

Output:

Test 1
Test 2
Test 3

Basic unordered list with list style

Shortcode:

{{&lt; html/list_wrapper listStyle="circle" &gt;}}  
    {{&lt; html/li &gt;}}Test 1{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 2{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 3{{&lt;/ html/li &gt;}}  
{{&lt;/ html/list_wrapper &gt;}}

Output:

Test 1
Test 2
Test 3

Basic ordered list with list style

Shortcode:

{{&lt; html/list_wrapper listType="ol" listStyle="lower-roman" &gt;}}  
  {{&lt; html/li &gt;}}Test 1{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 2{{&lt;/ html/li &gt;}}  
  {{&lt; html/li &gt;}}Test 3{{&lt;/ html/li &gt;}}  
{{&lt;/ html/list_wrapper &gt;}}

Output:

Test 1
Test 2
Test 3

Complex/nested lists

Example of mixed shortcode and markdown lists. Supports shortcode and markdown being fully interchangable

Shortcode:

- Sample nested
  {{&lt; html/list_wrapper listType="ol" listStyle="lower-roman" &gt;}}
    {{&lt; html/li &gt;}}Sample content as shortcodes:{{&lt;/ html/li &gt;}}
{{&lt; html/list_wrapper listStyle="circle" &gt;}}
  {{&lt; html/li &gt;}}Test 1{{&lt;/ html/li &gt;}}
  {{&lt; html/li &gt;}}Test 2{{&lt;/ html/li &gt;}}
{{&lt;/ html/list_wrapper &gt;}}
    {{&lt; html/li &gt;}}Test 2{{&lt;/ html/li &gt;}}
    {{&lt; html/li &gt;}}Sample content as markdown
- Test  
- Test2  
    {{&lt;/ html/li &gt;}}
  {{&lt;/ html/list_wrapper &gt;}}  
- Second bullet

Output:

Sample nested
1. Sample content as shortcodes:
2. Test 2
3. Sample content as markdown
  - Test
  - Test2
Second bullet