> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/17.list.md).

# List

### List Props <a href="#list-props" id="list-props"></a>

| Name                    | Type    | Default                                                                   | Description                                                                                    |
| ----------------------- | ------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| colors                  | object  |                                                                           | Object with Tailwind CSS colors classes                                                        |
| colors.outlineIos       | string  | 'border-black border-opacity-20 dark:border-white dark:border-opacity-15' |                                                                                                |
| colors.outlineMaterial  | string  | 'border-md-light-outline border-md-dark-outline'                          |                                                                                                |
| colors.strongBgIos      | string  | 'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'                       |                                                                                                |
| colors.strongBgMaterial | string  | 'bg-md-light-surface-1 dark:bg-md-dark-surface-1'                         |                                                                                                |
| component               | string  | 'div'                                                                     | Component's HTML Element                                                                       |
| dividers                | boolean | undefined                                                                 | Renders dividers (borders) between list items, overwrites `dividersIos` and `dividersMaterial` |
| dividersIos             | boolean | true                                                                      | Renders dividers (borders) between list items in iOS theme                                     |
| dividersMaterial        | boolean | false                                                                     | Renders dividers (borders) between list items in Material theme                                |
| inset                   | boolean | undefined                                                                 | Makes list block inset. Overwrites `insetIos` and `insetMaterial`                              |
| insetIos                | boolean | false                                                                     | Makes list block inset in iOS theme                                                            |
| insetMaterial           | boolean | false                                                                     | Makes list block inset in Material theme                                                       |
| margin                  | string  | 'my-8'                                                                    | Tailwind CSS margin class                                                                      |
| menuList                | boolean |                                                                           | Renders list as Menu List (same as `<MenuList>`)                                               |
| nested                  | boolean | false                                                                     | Removes hairlines/dividers and margins, useful for case nesting list block within other blocks |
| outline                 | boolean | undefined                                                                 | Renders list outer borders. Overwrites `outlineIos` and `outlineMaterial`                      |
| outlineIos              | boolean | false                                                                     | Renders list outer borders in iOS theme                                                        |
| outlineMaterial         | boolean | false                                                                     | Renders list outer borders in Material theme                                                   |
| strong                  | boolean | undefined                                                                 | Adds extra highlighting. Overwrites `strongIos` and `strongMaterial`                           |
| strongIos               | boolean | false                                                                     | Adds extra highlighting in iOS theme                                                           |
| strongMaterial          | boolean | false                                                                     | Adds extra highlighting in Material theme                                                      |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="List" />

    <i-block-title>Simple List</i-block-title>
    <i-list>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong List</i-block-title>
    <i-list strong>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong Outline List</i-block-title>
    <i-list strong outline>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong Inset List</i-block-title>
    <i-list strong inset>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong Outline Inset List</i-block-title>
    <i-list strong outline inset>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Simple Links List</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item title="Link 1" link />
      <i-list-item title="Link 2" link />
      <i-list-item title="Link 3" link />
    </i-list>

    <i-block-title>Data list, with icons</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item title="Ivan Petrov" after="CEO">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item title="John Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge>5</i-badge>
        </template>
      </i-list-item>
      <i-list-item title="Jenna Smith">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
    </i-list>
    <i-block-title>Links</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item link title="Ivan Petrov" after="CEO">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item link title="John Doe" after="Cleaner">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item link title="Jenna Smith">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
    </i-list>
    <i-block-title>Links, Header, Footer</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item link header="Name" title="John Doe" after="Edit">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item link header="Phone" title="+7 90 111-22-3344" after="Edit">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item
        link
        header="Email"
        title="john@doe"
        footer="Home"
        after="Edit"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item
        link
        header="Email"
        title="john@ina-ui"
        footer="Work"
        after="Edit"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
    </i-list>

    <i-block-title>Links, no icons</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item link title="Ivan Petrov" />
      <i-list-item link title="John Doe" />
      <i-list-item group-title title="Group title Here" />
      <i-list-item link title="Ivan Petrov" />
      <i-list-item link title="Jenna Smith" />
    </i-list>

    <i-block-title>Grouped with sticky titles</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-group>
        <i-list-item
          title="A"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <i-list-item title="Aaron " />
        <i-list-item title="Abbie" />
        <i-list-item title="Adam" />
      </i-list-group>
      <i-list-group>
        <i-list-item
          title="B"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <i-list-item title="Bailey" />
        <i-list-item title="Barclay" />
        <i-list-item title="Bartolo" />
      </i-list-group>
      <i-list-group>
        <i-list-item
          title="C"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <i-list-item title="Caiden" />
        <i-list-item title="Calvin" />
        <i-list-item title="Candy" />
      </i-list-group>
    </i-list>

    <i-block-title class="text-2xl">Media Lists</i-block-title>
    <i-block>
      <p>
        Media Lists are almost the same as Data Lists, but with a more flexible
        layout for visualization of more complex data, like products, services,
        user, etc.
      </p>
    </i-block>

    <i-block-title>Songs</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item
        :chevron-material="false"
        link
        title="Yellow Submarine"
        after="$15"
        subtitle="Beatles"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <img
            class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
            src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
            width="80"
            alt="demo"
          />
        </template>
      </i-list-item>
      <i-list-item
        :chevron-material="false"
        link
        title="Don't Stop Me Now"
        after="$22"
        subtitle="Queen"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <img
            class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
            src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
            width="80"
            alt="demo"
          />
        </template>
      </i-list-item>
      <i-list-item
        :chevron-material="false"
        link
        title="Billie Jean"
        after="$16"
        subtitle="Michael Jackson"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <img
            class="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
            src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
            width="80"
            alt="demo"
          />
        </template>
      </i-list-item>
    </i-list>
    <i-block-title>Mail App</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item
        :chevron-material="false"
        link
        title="Facebook"
        after="17:14"
        subtitle="New messages from John Doe"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
      <i-list-item
        :chevron-material="false"
        link
        title="John Doe (via Twitter)"
        after="17:11"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
      <i-list-item
        :chevron-material="false"
        link
        title="Facebook"
        after="16:48"
        subtitle="New messages from John Doe"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
      <i-list-item
        :chevron-material="false"
        link
        title="John Doe (via Twitter)"
        after="15:32"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      />
    </i-list>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBadge,
    iBlock,
    iBlockTitle,
    iList,
    iListGroup,
    iListItem,
  } from 'ina-ui/vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBadge,
      iBlock,
      iBlockTitle,
      iList,
      iListGroup,
      iListItem,
      DemoIcon,
    },

  };
</script>
```

{% endtab %}

{% tab title="React" %}

```javascript
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Badge,
  Block,
  BlockTitle,
  List,
  ListGroup,
  ListItem,
} from 'ina-ui/react';
import DemoIcon from '../components/DemoIcon';

export default function ListPage() {
  return (
    <Page>
      <Navbar
        title="List"
        />

      <BlockTitle>Simple List</BlockTitle>
      <List>
        <ListItem title="Item 1" />
        <ListItem title="Item 2" />
        <ListItem title="Item 3" />
      </List>

      <BlockTitle>Strong List</BlockTitle>
      <List strong>
        <ListItem title="Item 1" />
        <ListItem title="Item 2" />
        <ListItem title="Item 3" />
      </List>

      <BlockTitle>Strong Outline List</BlockTitle>
      <List strong outline>
        <ListItem title="Item 1" />
        <ListItem title="Item 2" />
        <ListItem title="Item 3" />
      </List>

      <BlockTitle>Strong Inset List</BlockTitle>
      <List strong inset>
        <ListItem title="Item 1" />
        <ListItem title="Item 2" />
        <ListItem title="Item 3" />
      </List>

      <BlockTitle>Strong Outline Inset List</BlockTitle>
      <List strong outline inset>
        <ListItem title="Item 1" />
        <ListItem title="Item 2" />
        <ListItem title="Item 3" />
      </List>

      <BlockTitle>Simple Links List</BlockTitle>
      <List strongIos outlineIos>
        <ListItem title="Link 1" link />
        <ListItem title="Link 2" link />
        <ListItem title="Link 3" link />
      </List>

      <BlockTitle>Data list, with icons</BlockTitle>
      <List strongIos outlineIos>
        <ListItem media={<DemoIcon />} title="Ivan Petrov" after="CEO" />
        <ListItem
          title="John Doe"
          media={<DemoIcon />}
          after={<Badge>5</Badge>}
        />
        <ListItem media={<DemoIcon />} title="Jenna Smith" />
      </List>
      <BlockTitle>Links</BlockTitle>
      <List strongIos outlineIos>
        <ListItem media={<DemoIcon />} link title="Ivan Petrov" after="CEO" />
        <ListItem media={<DemoIcon />} link title="John Doe" after="Cleaner" />
        <ListItem media={<DemoIcon />} link title="Jenna Smith" />
      </List>
      <BlockTitle>Links, Header, Footer</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          media={<DemoIcon />}
          link
          header="Name"
          title="John Doe"
          after="Edit"
        />
        <ListItem
          media={<DemoIcon />}
          link
          header="Phone"
          title="+7 90 111-22-3344"
          after="Edit"
        />
        <ListItem
          link
          header="Email"
          title="john@doe"
          footer="Home"
          after="Edit"
          media={<DemoIcon />}
        />
        <ListItem
          link
          header="Email"
          title="john@ina-ui"
          footer="Work"
          after="Edit"
          media={<DemoIcon />}
        />
      </List>

      <BlockTitle>Links, no icons</BlockTitle>
      <List strongIos outlineIos>
        <ListItem link title="Ivan Petrov" />
        <ListItem link title="John Doe" />
        <ListItem groupTitle title="Group title here" />
        <ListItem link title="Ivan Petrov" />
        <ListItem link title="Jenna Smith" />
      </List>

      <BlockTitle>Grouped with sticky titles</BlockTitle>
      <List strongIos outlineIos>
        <ListGroup>
          <ListItem
            title="A"
            groupTitle
            className="ios:top-11-safe material:top-16-safe sticky"
          />
          <ListItem title="Aaron " />
          <ListItem title="Abbie" />
          <ListItem title="Adam" />
        </ListGroup>
        <ListGroup>
          <ListItem
            title="B"
            groupTitle
            className="ios:top-11-safe material:top-16-safe  sticky"
          />
          <ListItem title="Bailey" />
          <ListItem title="Barclay" />
          <ListItem title="Bartolo" />
        </ListGroup>
        <ListGroup>
          <ListItem
            title="C"
            groupTitle
            className="ios:top-11-safe material:top-16-safe  sticky"
          />
          <ListItem title="Caiden" />
          <ListItem title="Calvin" />
          <ListItem title="Candy" />
        </ListGroup>
      </List>

      <BlockTitle className="text-2xl">Media Lists</BlockTitle>
      <Block>
        <p>
          Media Lists are almost the same as Data Lists, but with a more
          flexible layout for visualization of more complex data, like products,
          services, user, etc.
        </p>
      </Block>

      <BlockTitle>Songs</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          link
          chevronMaterial={false}
          title="Yellow Submarine"
          after="$15"
          subtitle="Beatles"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <img
              className="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
              src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
              width="80"
              alt="demo"
            />
          }
        />
        <ListItem
          link
          chevronMaterial={false}
          title="Don't Stop Me Now"
          after="$22"
          subtitle="Queen"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <img
              className="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
              src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
              width="80"
              alt="demo"
            />
          }
        />
        <ListItem
          link
          chevronMaterial={false}
          title="Billie Jean"
          after="$16"
          subtitle="Michael Jackson"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <img
              className="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"
              src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
              width="80"
              alt="demo"
            />
          }
        />
      </List>
      <BlockTitle>Mail App</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          link
          chevronMaterial={false}
          title="Facebook"
          after="17:14"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
        <ListItem
          link
          chevronMaterial={false}
          title="John Doe (via Twitter)"
          after="17:11"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
        <ListItem
          link
          chevronMaterial={false}
          title="Facebook"
          after="16:48"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
        <ListItem
          link
          chevronMaterial={false}
          title="John Doe (via Twitter)"
          after="15:32"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
        />
      </List>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/17.list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.