---
title: List
type: tags
order: 305
meta_title: List Tag displays items of the same type, like articles, search results, etc.

meta_description: Customize Label Studio by displaying similar items from task data for machine learning and data science projects.

The List tag is used to display a list of similar items like articles, search results, etc. Task data in the value parameter should be an array of objects with id, title, body, and html fields.

It's much more lightweight to use List than to group other tags like Text. Also, you can attach classifications to provide additional data about this list.

The List tag can be used with the Ranker tag to rank items or pick relevant items from a list.
Items can be styled in Style tag by using .htx-ranker-item class.

{% insertmd includes/tags/list.md %}

Example

Visual appearance can be changed via Style tag with these classnames

<View>
  <Style>
    .htx-ranker-column { background: cornflowerblue; }
    .htx-ranker-item { background: lightgoldenrodyellow; }
  </Style>
  <List name="results" value="$items" title="Search Results" />
</View>

Example

Example data for List tag

{
  "items": [
    { "id": "blog", "title": "10 tips to write a better function", "body": "There is nothing worse than being left in the lurch when it comes to writing a function!" },
    { "id": "mdn", "title": "Arrow function expressions", "body": "An arrow function expression is a compact alternative to a traditional function" },
    { "id": "wiki", "title": "Arrow (computer science)", "body": "In computer science, arrows or bolts are a type class..." }
  ]
}

Example

Example data for List tag

{
  "items": [
     { "id": "blog", "title": "Image 1", "html": "<img src='http://example.com/1.jpg'>" },
     { "id": "mdn", "title": "Image 2", "html": "<img src='http://example.com/2.jpg'>" }
   ]
}