Power Cell 3
Power Cell 3 is predominantly used for Hero type cells but can be used with other components. The image is behind the text

Complete list of configurations & default values for Power Cell 3
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 |
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 |
|
Padding Left and Right |
Values set here will offset the image relative to the left or right edge of the cell for this kind of effect |
|
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 |
|
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 |
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 |
Top/Centre/Bottom 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 |
Top/Centre/Bottom 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 |
Top/Centre/Bottom 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 |
Image Ratios
Image ratios can be changed to either match the source image ratio or to change the aesthetic of the cell. Ratios include: 16x9, 3x2, 4x3, 1x1, 3x4, 2x3

Padding
Padding can be added to the cell in order to add extra space for content to fit within the cell. An example of this could be a hero cell with a large synopsis. Padding can be added to the bottom so the full text can be displayed without obscuring the image. An image overlay asset can be added to blend the image in with the cell background color.

Text Label Anchoring
There are 6x text labels within the cell. The 3x top labels are anchored to the top of the cell & the 3x bottom labels are anchored to the bottom of the cell. When the text labels are more than 1x line they ‘grow’ away from the anchor point.

Drop Shadow / Elevation

Text Label Backgrounds & Badge/Action Button Positioning

Comments
0 comments
Please sign in to leave a comment.