# catalogTemplate
Displays groups of items along one side of a page and images of a group’s contents
on the other side.
## Overview
Use the `catalogTemplate` element to display information about groups of like products;
for example, a movie catalog that provides categories for dramas, comedies, and all
movies. Each group of products is contained in its own section and displayed along
the left side of the screen. Images depicting the products contained within a selected
group are displayed in the related content area on the right side of the screen.
The following figure shows the basic layout for a `catalogTemplate` page. The theme
for the catalog template defaults to the system preference.
### Main Elements
The following listing shows the main elements of the `catalogTemplate` element in
TVML format.
```xml
…
```
#### Element Descriptions
- [banner](/documentation/TVML/banner): Information describing what the catalog contains, such as movies.
- [header](/documentation/TVML/header): Information describing what one section of the page contains.
- [list](/documentation/TVML/list): Element containing all content in the template page, except banner
information.
- [listItemLockup](/documentation/TVML/listitemlockup): Element containing all information that relates to one
list item on the left side of the page, including the item title and label, as well
as related content.
- [section](/documentation/TVML/section): An area of the page containing related elements that are grouped
together as one element for layout purposes.
### Example
The following listing shows the TVML for a `catalogTemplate` example. The example
displays a title along the top of the screen. Two items representing movie categories,
All Movies and Comedies, are listed along the left side of the screen. Movie posters
are presented on the right in a grid format according to which movie category the
user selects.
```xml
Movies
All Movies
6
Movie 1
Movie 2
Movie 3
Movie 4
Movie 5
Movie 6
Comedies
4
Movie 2
Movie 1
Movie 4
Movie 3
```
The following figure shows the output for the above example:
## Topics
### Valid TVML Attributes
[autoHighlight](/documentation/TVML/autohighlight)
Specifies that the element should initially be in focus.
[binding](/documentation/TVML/binding)
Associates information in a data item with an element.
[layoutDirection](/documentation/TVML/layoutdirection)
Specifies the direction in which text is displayed.
[prototype](/documentation/TVML/prototype)
Associates a data item type with an element.
[theme](/documentation/TVML/theme)
Sets the color scheme for an element.
---
Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)