List
| Class name | Type | Description |
|---|---|---|
tc-list | Component | Unordered list |
tc-list-horizontal | Component | Horizontal list |
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-ordered
- First
- Second
- 2.1
- 2.2
- 2.2.1
- 2.2.2
- 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-1-1
- Topic 1-2
- Topic 1-3
- Topic 1-1
- 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>
<nav class="flex mb-6" aria-label="Breadcrumb">
<ol class="tc-list-horizontal space-x-1">
<li>
<a href="#" title="Home" class="hover:text-theme-primary">
<skin-icon name="home" class="h-4 w-4 me-1.5" data-stroke-width="2"></skin-icon>
Home
</a>
</li>
<li>
<skin-icon name="chevron-right" class="w-3 h-3 me-1" data-stroke-width="3"></skin-icon>
<a href="#" title="Articles" class="hover:text-theme-primary">
Articles
</a>
</li>
<li class="font-semibold" aria-current="page">
<skin-icon name="chevron-right" class="w-3 h-3 me-1" data-stroke-width="3"></skin-icon>
Article title
</li>
</ol>
</nav>
<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>