Taiga UI 5 is out!

List LAYOUT v5.0.0+

GitHub

On this page

Bulleted

Body L


List of Continents
  • Eurasia
  • Africa
  • Australia
  • Antarctica
  • North America
  • South America

Body M


List of Continents
  • Eurasia
  • Africa
  • Australia
  • Antarctica
  • North America
  • South America

UI S


List of Continents
  • Eurasia
  • Africa
  • Australia
  • Antarctica
  • North America
  • South America
    
      
    

      
      
    

  
    
      <h2 tuiHeader="h6">Body L</h2>
<br />
<h6 tuiHeader="body-l">List of Continents</h6>
<ul tuiList>
    <li>Eurasia</li>
    <li>Africa</li>
    <li>Australia</li>
    <li>Antarctica</li>
    <li>North America</li>
    <li>South America</li>
</ul>
<br />
<h2 tuiHeader="h6">Body M</h2>
<br />
<h6 tuiHeader="body-l">List of Continents</h6>
<ul tuiList="m">
    <li>Eurasia</li>
    <li>Africa</li>
    <li>Australia</li>
    <li>Antarctica</li>
    <li>North America</li>
    <li>South America</li>
</ul>
<br />
<h2 tuiHeader="h6">UI S</h2>
<br />
<h6 tuiHeader="body-l">List of Continents</h6>
<ul tuiList="s">
    <li>Eurasia</li>
    <li>Africa</li>
    <li>Australia</li>
    <li>Antarctica</li>
    <li>North America</li>
    <li>South America</li>
</ul>

Numbered

Body L


List of Continents
  1. Eurasia
  2. Africa
  3. Australia
  4. Antarctica
  5. North America
  6. South America

Body M


List of Continents
  1. Eurasia
  2. Africa
  3. Australia
  4. Antarctica
  5. North America
  6. South America

UI S


List of Continents
  1. Eurasia
  2. Africa
  3. Australia
  4. Antarctica
  5. North America
  6. South America
    
      
    

      
      
    

  
    
      <h2 tuiHeader="h6">Body L</h2>
<br />
<h6 tuiHeader="body-l">List of Continents</h6>
<ol tuiList>
    <li>Eurasia</li>
    <li>Africa</li>
    <li>Australia</li>
    <li>Antarctica</li>
    <li>North America</li>
    <li>South America</li>
</ol>
<br />
<h2 tuiHeader="h6">Body M</h2>
<br />
<h6 tuiHeader="body-l">List of Continents</h6>
<ol tuiList="m">
    <li>Eurasia</li>
    <li>Africa</li>
    <li>Australia</li>
    <li>Antarctica</li>
    <li>North America</li>
    <li>South America</li>
</ol>
<br />
<h2 tuiHeader="h6">UI S</h2>
<br />
<h6 tuiHeader="body-l">List of Continents</h6>
<ol tuiList="s">
    <li>Eurasia</li>
    <li>Africa</li>
    <li>Australia</li>
    <li>Antarctica</li>
    <li>North America</li>
    <li>South America</li>
</ol>

Definition

Regular
Component
List
Name
Taiga UI
Version
5.22.0

Compact
Component
List
Name
Taiga UI
Version
5.22.0
    
      
    

      
      
    

  
    
      <header tuiHeader="h6">Regular</header>
<dl tuiList>
    @for (item of data | keyvalue; track $index) {
        <dt>{{ item.key }}</dt>
        <dd>{{ item.value }}</dd>
    }
</dl>
<br />
<header tuiHeader="h6">Compact</header>
<dl
    compact
    tuiList="m"
>
    @for (item of data | keyvalue; track $index) {
        <dt>{{ item.key }}</dt>
        <dd>{{ item.value }}</dd>
    }
</dl>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Nested

Header of first list

  1. First level
    1. Second level
    2. Second level
      1. Third level
      2. Third level
    3. Second level
      1. Third level
      2. Third level
        1. Fourth level
        2. Fourth level
  2. First level

Header of second list

  • First level
    • Second level
    • Second level
      • Third level
      • Third level
  • First level
    
      
    

      
      
    

  
    
      <header tuiHeader="h6">
    <hgroup tuiTitle>
        <h1>Header of first list</h1>
    </hgroup>
</header>
<ol tuiList>
    <li>
        First level

        <ol tuiList>
            <li>Second level</li>
            <li>
                <span>Second level</span>

                <ol tuiList>
                    <li>Third level</li>
                    <li>Third level</li>
                </ol>
            </li>
            <li>
                <span>Second level</span>

                <ol tuiList>
                    <li>Third level</li>
                    <li>
                        <span>Third level</span>

                        <ol tuiList>
                            <li>Fourth level</li>
                            <li>Fourth level</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>First level</li>
</ol>
<br />
<header tuiHeader="h6">
    <hgroup tuiTitle>
        <h1>Header of second list</h1>
    </hgroup>
</header>
<ul tuiList>
    <li>
        First level

        <ul tuiList>
            <li>Second level</li>
            <li>
                <span>Second level</span>

                <ul tuiList>
                    <li>Third level</li>
                    <li>Third level</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>First level</li>
</ul>

Long text

  • If a list item is long, the bullet stays aligned to the top.
  • There are no restrictions on the text length at all. You can write as much text as you want.
  • This item uses nested tags inside which should not break
  1. If a list item is long, the bullet stays aligned to the top.
  2. There are no restrictions on the text length at all. You can write as much text as you want.
    
      
    

      
      
    

  
    
      <ul tuiList>
    <li>If a list item is long, the bullet stays aligned to the top.</li>
    <li>There are no restrictions on the text length at all. You can write as much text as you want.</li>
    <li>
        <div>
            This item uses
            <strong>nested tags</strong>
            inside which should not break
        </div>
    </li>
</ul>

<ol tuiList>
    <li>If a list item is long, the bullet stays aligned to the top.</li>
    <li>There are no restrictions on the text length at all. You can write as much text as you want.</li>
</ol>

Custom color

  • All bullets in this list share the same custom color
  • Set the--tui-list-markervariable on the list itself
  • No need to override the bullet background manually
  • Bullets can also be recolored individually
  • This one is a warning
  • This one is positive
    
      
    

      
      
    

  
    
      <ul
    style="--tui-list-marker: var(--tui-status-negative)"
    tuiList
>
    <li>All bullets in this list share the same custom color</li>
    <!-- prettier-ignore -->
    <li>Set the<code>--tui-list-marker</code>variable on the list itself</li>
    <li>No need to override the bullet background manually</li>
</ul>

<ul tuiList>
    <li>Bullets can also be recolored individually</li>
    <li style="--tui-list-marker: var(--tui-status-warning)">This one is a warning</li>
    <li style="--tui-list-marker: var(--tui-status-positive)">This one is positive</li>
</ul>
GitHub StackBlitz