---
title: listTemplate
framework: tvml
role: collectionGroup
path: tvml/listtemplate
---

# listTemplate

Displays a list of items along one side of a page and the corresponding image on the other side.

## Overview

Overview Use the listTemplate element to display a list of items; for example, a list of the user’s favorite movies. Whereas you use the catalog template to display categories of a product (action movies, comedies, favorite movies), you use the list template to display actual contents of one category, such as a list of the user’s favorite movies. The items are listed on the right side of the screen with like items grouped together in a section. A title providing a brief description of the items is contained in a header area directly above the listed items. When an item is selected, information about the item is displayed on the left side of the screen. The following figure shows the basic layout for a listTemplate page. The theme for the list template defaults to the system preference.

Main Elements The following listing shows the main elements of the listTemplate in TVML format. <listTemplate>    <banner>       …    </banner>    <list>       <header>          …       </header>       <section>          <listItemLockup>             <title>…</title>             <relatedContent>                …             </relatedContent>          </listItemLockup       </section>    </list> </listTemplate> Element Descriptions Example The following listing shows the TVML for a listTemplate example. An image and a description that relate to the highlighted item are displayed on the left side of the screen. <document>    <listTemplate>       <banner>          <title>Johnny Appleseed's Movie Collection</title>       </banner>       <list>          <header>             <title>Favorite Movies</title>          </header>          <section>             <listItemLockup>                <title>Movie 1</title>                <relatedContent>                   <lockup>                      <img src="path to images on your server/Car_Movie_1920x1080.png" width="857" height="482" />                      <title>Movie 1</title>                      <description>A brief description for the first movie should go here.</description>                   </lockup>                </relatedContent>             </listItemLockup>             <listItemLockup>                <title>Movie 2</title>                <relatedContent>                   <lockup>                      <img src="path to images on your server/Car_Movie_800x600.png" width="857" height="482" />                      <title>Movie 2</title>                      <description>A brief description for the second movie should go here.</description>                   </lockup>                </relatedContent>             </listItemLockup>             <listItemLockup>                <title>Movie 3</title>                <relatedContent>                   <lockup>                      <img src="path to images on your server/Car_Movie_720x720.png" width="857" height="482" />                      <title>Movie 3</title>                      <description>A brief description for the third movie should go here.</description>                   </lockup>                </relatedContent>             </listItemLockup>          </section>       </list>    </listTemplate> </document> The following figure shows the output for the above example:

## Topics

### Valid TVML Attributes

- [autoHighlight](tvml/autohighlight.md)
- [binding](tvml/binding.md)
- [layoutDirection](tvml/layoutdirection.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Full-Page Templates

- [alertTemplate](tvml/alerttemplate.md)
- [catalogTemplate](tvml/catalogtemplate.md)
- [compilationTemplate](tvml/compilationtemplate.md)
- [descriptiveAlertTemplate](tvml/descriptivealerttemplate.md)
- [divTemplate](tvml/divtemplate.md)
- [formTemplate](tvml/formtemplate.md)
- [loadingTemplate](tvml/loadingtemplate.md)
- [mainTemplate](tvml/maintemplate.md)
- [menuBarTemplate](tvml/menubartemplate.md)
- [oneupTemplate](tvml/oneuptemplate.md)
- [paradeTemplate](tvml/paradetemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)
- [searchTemplate](tvml/searchtemplate.md)