Quick Brick Mobile Power Cell 2 Configuration

Power Cell 2 Configuration

Power Cell 2 displays an image alongside text and is typically used in a List component

Complete list of configurations & default values for Power Cell 2.

Description	Name	Value
Assets Section
Content Badge	Enable	On
	Static Badge	Play-Icon.png
	Program Badge	Empty
	Feed Badge	Empty
	Empty	Empty
	Article Badge	Empty
	Channel Badge	Empty
	Video Badge	Empty
	Badge Position	Center (default), Top Left, Top Right, Bottom Left, Bottom Right
	Width	44
	Height	44
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
Lock Badge	Enable	Off
	Locked Badge	lock_icon.png
	Unlocked Badge	unlock_icon.png
	Badge Position	Center, Top Left (default), Top Right, Bottom Left, Bottom Right
	Width	44
	Height	44
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
	Lock Badge Data Key	extensions.free
Action Button Section
Favourite Button	Enable	Off
	Action Plugin Identifier	local_storage_favourites_action
	Selected Action Icon
	Unselected Action Icon
	Button Position	Center, Top Left, Top Right (default), Bottom Left, Bottom Right
	Width	44
	Height	44
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
Image Section
Image	Enable	On
	Image Key	image_base
	Image Ratio	Select from 16x9 (default), 1x1, 2x3, 3x2, 3x4, 4x3 or 'other" and then use a free for entry e.g. 3x1 to match any desired image ratio provided by your data source.
	Placeholder Color	#242936 or rgba(36, 41, 54, 1)
	Placeholder Image
	Overlay Image
	Corner Radius (Add 50% option)	0
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
	Android Elevation	0
	iOS Shadow Color	rgba(0, 0, 0, 0)
	iOS Shadow Opacity	0
	iOS Shadow Offset Width	0
	iOS Shadow Offset Height	0
	iOS Shadow Radius	0
Cell Badging (Arrow Asset)*	Enable	On
New name needed	Cell Badge	arrow_icon.png
	Width	24
	Height	24
	Margin Left	16
	Margin Right	0
Styles Section
Cell	Background Color	rgba(0, 0, 0, 0)
	Focused Background Color	rgba(0, 0, 0, 0)
	Corner Radius (Add 50% option)	0
	Padding Top	0
	Padding Right	0
	Padding Bottom	0
	Padding Left	0
	Remove cell margins?
	Android Elevation	0
	iOS Shadow Color	rgba(0, 0, 0, 0)
	iOS Shadow Opacity	0
	iOS Shadow Offset Width	0
	iOS Shadow Offset Height	0
	iOS Shadow Radius	0
Cell Top Border	Enable	Off
	Border Top Color	Transparent
	Border Top Focused Color	Transparent
	Border Top Thickness	0
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
Cell Bottom Border	Enable	Off
	Border Bottom Color	Transparent
	Border Bottom Focused Color	Transparent
	Border Bottom Thickness	0
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
Runtime Label	Enable	Off
	Font Color	rgba(255, 255, 255, 1)
	iOS Font Family	SFProText-Medium
	Android Font Family	Roboto-Medium
	Font Size	11
	Line Height	14
	iOS Letter Spacing	0
	Android Letter Spacing	0
	Padding Top	1
	Padding Right	4
	Padding Bottom	1
	Padding Left	4
	Background Color	rgba(0, 0, 0, 0.9)
	Corner Radius (Add 50% option)	2
	Margin Right	10
	Margin Bottom	10
Text Label 1	Enable	On
	Data Key	extensions.section
	Font Color	rgba(4, 207, 153, 1)
	Focused Font Color	rgba(4, 207, 153, 1)
	iOS Font Family	SFProText-Bold
	Android Font Family	Roboto-Bold
	Font Size	11
	Line Height	14
	iOS Letter Spacing	-0.2
	Android Letter Spacing	0
	Text Alignment	Left (Default), Center, Right
	Text Transform	Default, Uppercase, Lowercase, Capitalize
	Number Of Lines	1
	Margin Top	8
	Margin Right	0
	Margin Bottom	4
	Margin Left	0
	Padding Top	0
	Padding Right	0
	Padding Bottom	0
	Padding Left	0
	Background Color	Transparent
	Focused Background Color	Transparent
	Corner Radius (Add 50% option)	0
Text Label 2	Enable	On
	Data Key	title
	Font Color	rgba(255, 255, 255, 1)
	Focused Font Color	rgba(255, 255, 255, 1)
	iOS Font Family	SFProText-Bold
	Android Font Family	Roboto-Bold
	Font Size	15
	Line Height	20
	iOS Letter Spacing	-0.4
	Android Letter Spacing	0
	Text Alignment	Left (Default), Center, Right
	Text Transform	Default, Uppercase, Lowercase, Capitalize
	Number Of Lines	1
	Margin Top	0
	Margin Right	0
	Margin Bottom	2
	Margin Left	0
	Padding Top	0
	Padding Right	0
	Padding Bottom	0
	Padding Left	0
	Background Color	Transparent
	Focused Background Color	Transparent
	Corner Radius (Add 50% option)	0
Text Label 3	Enable	On
	Data Key	summary
	Font Color	rgba(255, 255, 255, 0.8)
	Focused Font Color	rgba(255, 255, 255, 0.8)
	iOS Font Family	SFProText-Medium
	Android Font Family	Roboto-Medium
	Font Size	13
	Line Height	18
	iOS Letter Spacing	-0.4
	Android Letter Spacing	0
	Text Alignment	Left (Default), Center, Right
	Text Transform	Default, Uppercase, Lowercase, Capitalize
	Number Of Lines	1
	Margin Top	0
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
	Padding Top	0
	Padding Right	0
	Padding Bottom	0
	Padding Left	0
	Background Color	Transparent
	Focused Background Color	Transparent
	Corner Radius (Add 50% option)	0
Text Label 4	Enable	Off
	Data Key	summary
	Font Color	rgba(255, 255, 255, 0.8)
	Focused Font Color	rgba(255, 255, 255, 0.8)
	iOS Font Family	SFProText-Medium
	Android Font Family	Roboto-Medium
	Font Size	10
	Line Height	14
	iOS Letter Spacing	-0.2
	Android Letter Spacing	0
	Text Alignment	Left (Default), Center, Right
	Text Transform	Default, Uppercase, Lowercase, Capitalize
	Number Of Lines	1
	Margin Top	4
	Margin Right	0
	Margin Bottom	0
	Margin Left	0
	Padding Top	0
	Padding Right	0
	Padding Bottom	0
	Padding Left	0
	Background Color	Transparent
	Focused Background Color	Transparent
	Corner Radius (Add 50% option)	0

Default Values

Here is an illustration of how Power Cell 2 default values look.

Image

The image part of Power Cell 2 has the same capabilities as Power Cell 1:

• Ability to select a number of different image ratio’s.

• Position lock/unlock & play badges in 5 different areas (top left/right, bottom left/right & middle)

• Add a runtime label

• Add a placeholder color, placeholder image & overlay image

• Adjust the corner radius

The image element differs from Power Cell 1 in the following ways:

• The image width needs to be defined (the height of the image is worked out using the width & ratio)

• The image can be toggled On/Off. Text only cells can be achieved this way.

• Shadow/Elevation can be added to the image element

Action Button

The cell features an area for an action button on the right hand side of the cell. This could be used for actions such as: Download, Favourite, Reminder or Share (when they are available). This area could also be used for decorative icons such as an arrow icon to signal that the item can be tapped.

• The width & height needs to be defined for this element

Borders

Borders can be added to the top & bottom of the cell. These can be useful when a clear division is needed between cells.

Shadow/Elevation

Drop shadows can be added independently to the image and the cell itself. Android utilises the ‘elevation’ attribute where as iOS has more control over shadow color, distance & size.