Introduction

QB Mobile allows components (Grid, List, Horizontal List, Hero) to be configured with a range of styling parameters.

Component Differences

Components can render cells differently. An example of this is the difference between the ‘Grid’ & ‘Horizontal List’ versus the ‘List’ component.

Grid: Cell’s within a grid should match the height of the deepest cell in that row. The illustration below shows what happens when you have varying text label line amounts in the same row as well as cell height changing on a row to row basis.
Horizontal Lists: Cell’s within horizontal lists should have the same height no matter how much data is included in the individual cells.
List: List components should render cells dynamically so that the cells only occupy as much space as they need. The illustration below shows varying heights of cells dependant on the amount of lines the text labels take up.

Insert a Component into a Screen

Select <Add Component>

Select your component such as Horizontal List QB or any of the other QB components

Style your component

All components take their default values from the Theme Plugin. Once you over-write a value in a cell configuration field that value will over-write the Theme default value.

See the relevant help page for details of each of the Grid and List components

The following parameters can be configured.

Category	Item	Values
Rules	Item limit	Set the max number of cells to be displayed within the component
Data	Type	Select the DSP feed type for the list
Data	Source	Select the DSP feed source for the list
Target screen	Connected	Select if cells within the component are going to launch a connected screen rather than the player. This would be used for instance where a cell represents a show and selecting it launches a screen of episodes
Styles	See the relevant help page for details of each of the Grid and List components
Cells Configuration

Component Defaults

Rail or Horizontal List

Description	Name	Value
Component Margin	component-margin-top	0 (inherited from theme defaults)
	component-margin-bottom	20 (inherited from theme defaults)
Component Padding	component-padding-left	16 (inherited from theme defaults)
	component-padding-right	16 (inherited from theme defaults)
	component-padding-top	0 (inherited from theme defaults)
	component-padding-bottom	0 (inherited from theme defaults)
Component Gutter	component-gutter-vertical	N/A
	component-gutter-horizontal	13 (inherited from theme defaults)
Background Color	component-background-color	Transparent
Snapping	snapping-toggle	On
	snapping-alignment	Start
Cell Width (when scaling set to false)	cell-width	200
Cell Scaling	scaling-toggle	true
	scaling-number-of-cells	2
	scaling-next-cell-offset	20

List

Info here

Description	Name	Value
Component Margin	component-margin-top	0 (inherited from theme defaults)
	component-margin-bottom	20 (inherited from theme defaults)
Component Padding	component-padding-left	16 (inherited from theme defaults)
	component-padding-right	16 (inherited from theme defaults)
	component-padding-top	0 (inherited from theme defaults)
	component-padding-bottom	0 (inherited from theme defaults)
Component Gutter	component-gutter-vertical	16 (inherited from theme defaults)
	component-gutter-horizontal	N/A
Background Color	component-background-color	Transparent

Grid