Taiga UI 5.0 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;
}
GitHub StackBlitz