---
title: showcaseTemplate
framework: tvml
role: collectionGroup
path: tvml/showcasetemplate
---

# showcaseTemplate

Displays images the user can navigate between.

## Overview

Overview Use the showcaseTemplate element to display a row of images with descriptions associated with each image; for example, displaying a set of screenshots to promote a movie. Users can scroll between images. When an image comes into focus, the size of the image is increased to be slightly larger than the other images. The following figure shows the basic layout for a showcaseTemplate page. The default theme for a showcase template is dark.

Main Elements The following listing shows the main elements of the showcaseTemplate element in TVML format. <showcaseTemplate>     <background>…</background>     <banner>         <title>…</title>         <row>             <button>…</button>         </row>     </banner>     <carousel>         <section>             <lockup>…</lockup>         </section>     </carousel> </showcaseTemplate> Element Descriptions Example The following listing shows the TVML for a showcaseTemplate example. <document>     <showcaseTemplate mode="showcase">         <background>             <img src="path to images on your server/Car_Movie_1920x1080.png" />         </background>         <banner>             <title>Scenes</title>             <row>                 <button>                     <text>Slideshow</text>                 </button>                 <button>                     <text>Screensaver</text>                 </button>             </row>         </banner>         <carousel>             <section>                 <lockup>                     <img src="path to images on your server/Car_Movie_453x255_C.png" width="453" height="255" />                     <title>Scene 1</title>                 </lockup>                 <lockup>                     <img src="path to images on your server/Car_Movie_500x600.png" width="500" height="600" />                     <title>Scene 2</title>                 </lockup>                 <lockup>                     <img src="path to images on your server/Car_Movie_308x308_B.png" width="308" height="308" />                     <title>Scene 3</title>                 </lockup>                 <lockup>                     <img src="path to images on your server/Car_Movie_800x600.png" width="800" height="600" />                     <title>Scene 4</title>                 </lockup>             </section>         </carousel>     </showcaseTemplate> </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)
- [mode](tvml/mode.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)
- [paradeTemplate](tvml/paradetemplate.md)
- [productBundleTemplate](tvml/productbundletemplate.md)
- [productTemplate](tvml/producttemplate.md)
- [ratingTemplate](tvml/ratingtemplate.md)