<!--
{
  "documentType" : "article",
  "framework" : "TVML",
  "identifier" : "/documentation/TVML/listitemlockup",
  "metadataVersion" : "0.1.0",
  "role" : "collectionGroup",
  "title" : "listItemLockup"
}
-->

# listItemLockup

Contains a new list item.

## Overview

The `listItemLockup` subelements are arranged using the `tv-align` and `tv-position`
styles. Containing elements are centered by default.

![Layout diagram showing the positions other elements can be placed in.](images/com.apple.TVML/listitemlockup-1.png)

Elements contained in the same position are arranged from the top of the cell to
the bottom, in the same order in which they are specified in the `listItemLockup`
element. You can specify a `<background><img /></background>` that displays a background
image inside of the `listItemLockup`. The background image is top-aligned and is
fitted to the size of the `listItemLockup` while keeping the image’s original aspect
ratio. Text wrapping inside of the `listItemLockup` only occurs in the `header`,
`center`, and `footer` positions. Here is an example of a two `listItemLockup` elements
inside a `section` element.

```xml
<section>
    <listItemLockup>
        <ordinal minLength="2">1</ordinal>
        <title>Opening sequence</title>
        <decorationLabel>11:14</decorationLabel>
    </listItemLockup>
    <listItemLockup>
        <ordinal minLength="2">2</ordinal>
        <title>Fight song</title>
        <decorationLabel>3:47</decorationLabel>
    </listItemLockup>
</section>
```

### Subelements of listItemLockup

- [decorationImage](/documentation/TVML/decorationimage)
- [decorationLabel](/documentation/TVML/decorationlabel)
- [img](/documentation/TVML/img)
- [ordinal](/documentation/TVML/ordinal)
- [organizer](/documentation/TVML/organizer)
- [placeholder](/documentation/TVML/placeholder)
- [relatedContent](/documentation/TVML/relatedcontent)
- [row](/documentation/TVML/row)
- [subtitle](/documentation/TVML/subtitle)
- [title](/documentation/TVML/title)

### Elements that Use listItemLockup

- [section](/documentation/TVML/section)

## Topics

### Valid TVML Styles

[height](/documentation/TVML/element-shaping-height)

Specifies the height of an element.

[tv-align](/documentation/TVML/tv-align)

Aligns an element horizontally inside its parent.

[tv-highlight-color](/documentation/TVML/tv-highlight-color)

Changes an element’s color when it comes into focus.

[tv-position](/documentation/TVML/tv-position)

Sets the position of an element inside of its parent element.

### 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.

[prototype](/documentation/TVML/prototype)

Associates a data item type with an element.

[theme](/documentation/TVML/theme)

Sets the color scheme for an element.



---

Copyright &copy; 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)