How to use branded rows

This article introduces how to use branded rows.

What are branded rows?

Branded rows in AXIS enhance the appearance of lists, making them stand out on a busy page. They are specific row types that are designed to:

• Showcase imagery relating to the list

• Display advertisements or sponsorships

• Display text

• House links (to specific content or to the related list)

Branded rows work with row theming, which lets you choose a background color for the list. For more information on how to use themes, visit our set up themes article. Please note that from AXIS 10.0 onwards, theming is only available in a branded row, but it works in the same way as it did previously.

Which row types support branding?

Compatibility notes: From Reference Apps 7.0 onwards, the following row types support branded rows: PB1, PB2, PB3, and PB4.

The following row types support branding:

How to set up a branded row

The following steps detail how to set up a branded row within AXIS Presentation Manager:

1. Create a list with relevant assets - see creating and managing lists

2. Via the list Content tab, add required images (add relevant image sizes based on the desired branded row image requirements)

3. Specify list metadata

4. Configure list theming (if required) - see set up themes

5. Create a page — see pages and supported rows for information on available page types

6. On the newly created page, add a branded row for the list to display within (choose from branded rows listed above)

7. Add the list to the branded row — select or create a page

8. Within the row properties, specify the destination URL. By default, selecting the branded row tile in a list will display the list detail page, unless otherwise specified - set destination URL

9. Publish the page

Branded row examples

PB1 row example

Below is an example of the PB1 - Branded Cover (2:3 assets with leading 4:3 list image) row on the front-end:

To achieve this, refer to the following example explained below:

In Presentation Manager, the PB1 Branded Cover row uses the ‘Movies that sound better with SONOS’ list. The Movie assets that make up the list use the 2:3 Poster image type, while the leading image uses a 4:3 Hero Block image type, which is configured in the Images section at the list level.

PB4 row example

Below is an example of the PB4 - Branded Image (2:3 assets with 16:9 breakout list image and list theming) row on the front-end:

To achieve this, refer to the following example explained below:

In Presentation Manager, the PB1 Branded Cover row uses the ‘Collection - Fast And The Furious’ list. The Movie assets that make up the list use the 2:3 Poster image type, while the leading image uses the Custom image type and is configured in the Images section at list level.

Additional branded row use case examples

There are many creative options with branded rows and theming. This next section explains how to combine branded rows with editorial images to create the illusion of larger rows.

For example, adding an ED1 Editorial image row followed by a PB4 Branded image (2:3) row and another ED1 row, all with the same row theming, displays to end users like one enlarged row.

ED1 and PB4 front-end example:

How to set up a combined branded and editorial image row

1. Set up the ED1 row with the required editorial image.

2. Set up the PB4 row with the relevant list.

3. Set the list theme for the PB4 row (in the associated list properties) to match the colors in the ED1 image. For example, set the PB4 list theme color to match the ED1 Winter is Here image color.

ED1 image Presentation Manager configuration:

PB4 list row theming Presentation Manager configuration:

The example below shows the Primary #123147 color matches the ED1 image.

Accessibility check

Carry out an accessibility check on two selected theme colors within the same category (Background, Foreground, or Other) in order to establish whether there is enough contrast. This is a very important stage when choosing colors, to comply with accessibility standards.

1. Hover over the two colors you wish to compare and select the  icon on each. A tick icon indicates the two colors undergoing the accessibility check.

2. To the right of the screen, view the Accessibility check results.

Delete a color

Hover over the color you wish to delete and click the icon. This removes the color from your theme.

Accessibility check levels

The following are the conformance levels given in Presentation Manager as per the Web Content Accessibility Guidelines (WCAG) 2.0 guidelines:

• Level A: This is the minimum level of conformance. It includes the most basic web accessibility features.

• Level AA: This level includes all Level A and AA requirements. Many organizations strive to meet Level AA as it is considered the mid-range conformance level.

• Level AAA: This is the highest level of conformance and includes all Level A, AA, and AAA requirements.

• Fail: Does not meet the minimum requirements.