Taiga UI 5 is out!

List LAYOUT

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>Body L</h2>
<h6 style="font: var(--tui-typography-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>

<h2>Body M</h2>
<h6 style="font: var(--tui-typography-body-m)">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>

<h2>UI S</h2>
<h6 style="font: var(--tui-typography-ui-s)">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>

    

      
      
    

  
    
      h2 {
    padding-block-start: 0.3125rem;
    padding-block-end: 0.3125rem;
}

h6 {
    margin: 0;
}

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>Body L</h2>
<h6 style="font: var(--tui-typography-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>

<h2>Body M</h2>
<h6 style="font: var(--tui-typography-body-m)">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>

<h2>UI S</h2>
<h6 style="font: var(--tui-typography-ui-s)">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>

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>

<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>

    

      
      
    

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

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>
    <!-- prettier-ignore -->
    <li>This item uses <strong>nested tags</strong> inside which should not break</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>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    max-inline-size: 20rem;
    gap: 1rem;
}

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