List

Class name	Type	Description
`tc-list`	Component	Unordered list
`tc-list-horizontal`	Component	Horizontal list
`tc-list-breadcrumb`	Component	Horizontal list without `li` padding
`tc-list-ordered`	Component	Ordered list
`tc-list-outline`	Component	Outline formatted list

Examples

tc-list

First
Second
- 2.1
- 2.2
  - 2.2.1
  - 2.2.2
- 2.3
Third

tc-list-horizontal

First
Second
Third

tc-list-breadcrumb

tc-list-ordered

First
Second
1. 2.1
2. 2.2
  1. 2.2.1
  2. 2.2.2
3. 2.3
Third

tc-list-outline

Major Topic 1
- Topic 1-1
  - Topic 1-1-1
    - Topic 1-1-1-1
    - Topic 1-1-1-2
      - Topic 1-1-1-2-1
      - Topic 1-1-1-2-2
  - Topic 1-1-2
- Topic 1-2
- Topic 1-3
Major Topic 2
Major Topic 3


                
                <h3 class="tu-typo-apply">tc-list</h3>

<ul class="tc-list mb-6">
    <li>First</li>
    <li>Second
        <ul>
            <li>2.1</li>
            <li>2.2
                <ul>
                    <li>2.2.1</li>
                    <li>2.2.2</li>
                </ul>
            </li>
            <li>2.3</li>
        </ul>
    </li>
    <li>Third</li>
</ul>

<h3 class="tu-typo-apply">tc-list-horizontal</h3>

<ul class="tc-list-horizontal mb-6">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

<h3 class="tu-typo-apply">tc-list-breadcrumb</h3>

<ol class="tc-list-breadcrumb mb-6 tu-text-light" aria-label="Breadcrumb">

    <li>

        <a class="hover:text-theme-primary" href="#" title="Home">

            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="2"
                 stroke="currentColor"
                 class="w-4 h-4 -mt-1 mr-1 inline">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>

            Home

        </a>

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="3"
             stroke="currentColor"
             class="w-3 h-3 -mt-0.5 mr-1 inline">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>

    </li>

    <li>

        <a class="hover:text-theme-primary" href="#" title="Articles">
            Articles
        </a>

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke-width="3"
             stroke="currentColor"
             class="w-3 h-3 -mt-0.5 mr-1 inline">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>

    </li>

    <li class="tu-text-default font-semibold">Article Title</li>

</ol>

<h3 class="tu-typo-apply">tc-list-ordered</h3>

<ol class="tc-list-ordered mb-6">
    <li>First</li>
    <li>Second
        <ol>
            <li>2.1</li>
            <li>2.2
                <ol>
                    <li>2.2.1</li>
                    <li>2.2.2</li>
                </ol>
            </li>
            <li>2.3</li>
        </ol>
    </li>
    <li>Third</li>
</ol>

<h3 class="tu-typo-apply">tc-list-outline</h3>

<ul class="tc-list-outline">
    <li>Major Topic 1
        <ul>
            <li>Topic 1-1
                <ul>
                    <li>Topic 1-1-1
                        <ul>
                            <li>Topic 1-1-1-1</li>
                            <li>Topic 1-1-1-2
                                <ul>
                                    <li>Topic 1-1-1-2-1</li>
                                    <li>Topic 1-1-1-2-2</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Topic 1-1-2</li>
                </ul>
            </li>
            <li>Topic 1-2</li>
            <li>Topic 1-3</li>
        </ul>
    </li>
    <li>Major Topic 2</li>
    <li>Major Topic 3</li>
</ul>