---
title: paradeTemplate
framework: tvml
role: collectionGroup
path: tvml/paradetemplate
---

# paradeTemplate

Displays a groups of items along one side of a page and scrolling images on the other side.

## Overview

Overview Use the paradeTemplate element to display a list of automatically scrolling, static images on the left that are associated with a selected image category on the right. For example, a user selects Action movies, and the associated images automatically start scrolling. The following figure shows the basic layout for a paradeTemplate page. The theme for the parade template defaults to the system preference.

Main Elements The following listing shows main elements of the paradeTemplate in TVML format. <paradeTemplate>    <list>       <header>          <title>Title</title>       </header>       <section>          <listItemLockup>             <title>Title 1</title>          </listItemLockup>          <listItemLockup>             <title>Title 2</title>          </listItemLockup>       </section>       <relatedContent>          <imgDeck>             <img src="" />             <img src="" />          </imgDeck>       </relatedContent    </list> </paradeTemplate> Element Descriptions Example The following listing shows the TVML for a paradeTemplate example. <document>     <paradeTemplate>         <list>             <header>                 <title>Movie Genres</title>             </header>             <section>                 <listItemLockup>                     <title>Action</title>                 </listItemLockup>                 <listItemLockup>                     <title>Comedy</title>                 </listItemLockup>                 <listItemLockup>                     <title>Horror</title>                 </listItemLockup>                 <listItemLockup>                     <title>Kids</title>                 </listItemLockup>                 <listItemLockup>                     <title>Drama</title>                 </listItemLockup>             </section>             <relatedContent>                 <imgDeck>                     <img src="path to images on your server/Car_Movie_250x375.png "/>                     <img src="path to images on your server/Car_Movie_250x375_A.png "/>                     <img src="path to images on your server/Car_Movie_250x375_B.png "/>                     <img src="path to images on your server/Car_Movie_250x375_C.png "/>                 </imgDeck>             </relatedContent>         </list>     </paradeTemplate> </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)
- [listTemplate](tvml/listtemplate.md)
- [loadingTemplate](tvml/loadingtemplate.md)
- [mainTemplate](tvml/maintemplate.md)
- [menuBarTemplate](tvml/menubartemplate.md)
- [oneupTemplate](tvml/oneuptemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)
- [searchTemplate](tvml/searchtemplate.md)