This article covers rows and the importance of row types and page regions when displaying content.
- What are rows?
- Page row regions
- Page row count
- What row types exist?
- What can I display in a row?
- How do rows display on devices?
What are rows?
Rows form the building blocks of your pages in AXIS. They let you display content lists to your users in a wide range of layouts. Read on to understand how rows work in Presentation Manager.
Note: See our collection of row types articles for examples of how rows appear within Reference Apps.
Page row regions
There are three row regions on a page:
- The page Header/Hero row at the top of the page
- Standard rows, which form the body of the page
- A Footer row at the bottom of the page
When designing a page, you'll notice that a green divider rule separates the page regions. The page type selected determines the available page regions and subsequent​ row types. Learn more about this in our article on pages and supported rows.
Below is an example of a page header/hero row (top), a standard row (middle), and a footer row (bottom) in Presentation Manager. Some specific template pages, e.g., Home pages, have a page header row placeholder inserted automatically.
Note that you can only add a single row instance in both the page header/hero and footer row regions, whereas the page body will accept multiple standard rows.
Page row count
As you add rows to your page, a dynamic counter at the top of the page variant lets you know how many rows the page already contains. Hover over the field and a tooltip displays a count for each type (header, body, and footer). This feature was added in AXIS 9.4 and allows you to keep an eye on the size of your page to avoid performance issues or content being inadvertently cut off.
Note: We recommend that you retain the header/hero row on your page. This is because there are specific padding settings in place to ensure that the page header fits onto a full page and provides a seamless transition from the header menu to the body of the page. Removing the header creates a gap between the header menu and the first body row.
Which row types exist?
In addition to the page header/hero, standard, and footer rows, there are several other row types and sub-types to choose from. These give you multiple options to display your assets, images, and metadata in a range of formats and sizes. Other types include:
- Header/hero rows: hero peeking, hero mosaic, hero image, hero text, etc.
- Standard rows (body): poster, square, tile, block, tall, custom, sports, item detail, continuous scroll, linear, etc.
- Editorial rows: image, text, text and image, button, web view, etc.
What can I display in a row?
Use rows to display specific lists of assets on your page. You can mix the asset types displayed within a row:
- Shows contain a season
- Episodes construct a season
- Programs are standalone, non-movie content such as an event or TV special
- Seasons group all episodes within a season of a show
- Trailers are secondary playable content that is associated with other asset types, e.g., movies or programs
- Links are sub-assets used as an alias page, list, asset, or external URL
- Custom assets are non-playable, used to model other content and relationships
How do rows display on devices?
When creating a page, you can configure the device types you want a particular row to be displayed on - but note that this can also be determined by the row type you select.
The image below shows how a Home page design in AXIS Presentation Manager (center) displays on a mobile device (left) and browser (right).
The first row in Presentation Manager is a page header/hero row and displays on mobile, desktop, and tablet. The remaining rows are a selection of standard (body) rows.
Take note of the visual differences between the display on a mobile device (left) and a browser (right). In the example shown:
- The second row is a T1 standard row, set to appear on all devices
- The third row is an editorial image row, set to only appear on browsers and tablets
- The fourth row is a PB4 branded image row, set to appear on all devices
- The fifth row is a P1 standard row, set to only appear on browsers