Note: Power cell 3 is currently undergoing QA and is undergoing improvement. Known issues are listed at the end of this article
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 |
16x9 (default), 1x1, 2x3, 3x2, 3x4, 4x3 |
|
|
Placeholder Color |
#242936 or rgba(36, 41, 54, 1) |
|
|
Placeholder Image |
|
|
|
Overlay Image |
|
|
|
Corner Radius |
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 |
|
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 |
|
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 |
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
Known issues April 2020
- Cell corner radius only showing on top on of cell
-Lock badge missing from config (should have lock & unlock) Please match PC1 & 2.
- Odd rendering of background of cell when addingpadding at the bottom. Seems to be fine if add a background color.
-Shadows: to be decided if we keep these in
- Top text label 1 alignment is odd when selecting 'Center' or 'Right'. Looks like it aligns to the width of Top Text Label 2.
- Top text label 2 width is only as long as string. All text labels should be 100% width minus any margins.
- Top Text Label 3 background color does not match text width
- Top Text Label 3 Alignment does not seem to be working.
- Bottom Text labels seems to be aligning to the width of the longest string. This is wrong, all labels should be 100% width minus any margins.
- Alignment of Bottom Text Label 2 doesn't not seem to be working.
- Bottom Text Label 3 inherits BTL2 corner radius
- Alignment of bottom text label 3 does not seem to be working.
- iOS: Text label background corner radius is not working
Comments
0 comments
Please sign in to leave a comment.