Reading Life - Collections - Pinned Items
-
Upload
shanak-rahman -
Category
Documents
-
view
219 -
download
1
Transcript of Reading Life - Collections - Pinned Items
_experience the commitmentTM
Reading Life - Collections - Pinned ItemsTablet Wireframes
Version: 1.0Published: July 15, 2013 Created By: Shanak Rahman ([email protected])
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 2 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3Change Log
Reading Life - Full Home Experience
Introduction to Pinned Items
Pinned Items - URLs from Browser
Pinned Items - URLs from Third Party Apps & Generic Pins
Pinned Items - Books & Magazines
Pinned Items - Music, Videos, Images
Drag & Drop - Pinned Items
Drag & Drop - Apps
Drag & Drop - Collections
Apps Bars - Rules for Dragging/Dropping
Apps Bars - Rules for Dropping Apps
Drag&Merge + Drag&Drop
Deleting Items
Resizing - Intoduction
Resizing - Case 1
Resizing - Case 2
Resizing - Case 3
Resizing Rules
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 3 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
Change LogPAGE /SECTION
VERSION 1.0-1.1
Separated Pinned Items into a separate document. 1.0
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 4 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Reading Life - Full Home Experience
Noitification Bar
Tap here to create a collection
1 Custom Collection - Pinned ItemsPinned items live inside of collections. They are the items which collections are designed to hold.
Smart collections, like Books, Magazines and Pocket, pin items automatically based on a service (Kobo, or Pocket). In custom collections, however, users are the ones pinning and collecting items.
This document contains all requirements for pinned items, including the various types of pinned items and all interactions associated with them.
Books
12 items
Magazine
9 Items
Pocket9 Item
s
Social8 Item
s
1
Message from Kobo
Get 50% off your next great read
EXPIRES APRIL 13, 2013
New Issue!Apr 2013
Related to your readInferno
You finishedThe Hobbit
Rate it
15% read
DiscoverJane Austen
Related to your readPride and Prejudice
Go beyond the book for:Pride and Prejudice
Lebron James scores 27, records double double as Miami Heat roll past Milwakee Bucks
espn.com
45% read
5 5 5
About 2 hours to go
Book title goes here and spans two lines
spot72 just liked your Pulse post
About 9 hours to go
5 5 5
2 hrs to go
Search here for your next great read!
Kobo Store
Related to your readInferno
Entertainm
ent9 Item
s
Sample
8 Items
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 5 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Introduction to Pinned Items
Noitification Bar 1 This is a custom collectionCollections are a grouping mechanism that users can utilize to save and organize various media types, including apps, books, videos, websites and more. Users can create as many collections as they wish and organize them as they please.
Requirements for custom collections themselves items are found in the following document: Titan - Custom Collections.pdf
Tap here to create a
collection2
Renovations
92 Items
Hom
e
1
2 Pinned ItemsUsers can add various types of pinned items to custom containers. They can manipulate these pinned items in various ways as well (move to organize, resize, delete, etc).
This document contains all requirements for pinned items, including the various types of pinned items and all interactions associated with them.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 6 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - URLs from Browser
Case 1: Facebook OpenGraph tags available
Facebook OG Title meta tag, spanning as many lines as needed
domainURL.com
Case 3: Take screenshotCase 2: Social tags unavailable. Scrape page for thumbnail
Website title metatag, spanning as many lines as needed
domainURL.com
domainURL.com
1
1 Pull the best image possibleIf Facebook OG doesn't work, look for a twitter image tag instead.
2 Pull the best image possibleIf social metatags aren't available, scrape the page for the best possible representative image instead.
2
3 Use browser screenshot if all else fails. If all else fails, lets resort to taking a screenshot of the webpage. We will take out the title due to space constraints.
3
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 7 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - URLs from Third Party Apps & Generic Pins
Case 1: Facebook OpenGraph tags available
Facebook OG Title meta tag, spanning as many lines as needed
domainURL.com
Case 2: Social tags unavailable. Scrape page for thumbnail
Website title metatag, spanning as many lines as needed
domainURL.com
Case 3: No images available.
At its least, lets try to pull the website title tag At its least, lets try to pull the website title tag
domainURL.com
If there is a description tag available, lets display that here If there is a description tag available, lets display that here If there is a description tag available, lets display that here If there is a description tag available, lets display that here
General Pin & Offline pins
http://mumbojumbourlmumbo ursl/mumbojumbourlmumbo ursl/mumbojumbourlmumbo ursl/mumbojumbourlmumbo
/mumbojumbourlmumbo.com
1
1 Pull the best image possibleIf Facebook OG doesn't work, look for a twitter image tag instead.
2 Pull the best image possibleIf social metatags aren't available, scrape the page for the best possible representative image instead.
2
3 Use favricon, title, and description We cannot take screenshots in any app other than the browser. Thus, lets try to pull the favricon, title and description metatags and use them to populate the pinned item.
Resizing: As the user resizes this item, we show more/less text accordingly.
3
Third Party App shares URL: Facebook OpenGraph tags available
4 If all else fails, or if user is offline...Pin whatever is shared through the shared intent. If its a combination of text and urls, open the URL through the browser. Also design is to see if we want to use a generic pin icon like Arc.
Resizing: As the user resizes this item, we show more/less text accordingly.
Generic pinned item
The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets
The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here
5 Generic pins for non-URLsIf you have a third party app that has the share intent, and they are sharing something other than a URL (text, for ex), use this generic pin template.
Resizing: As the user resizes this item, we show more/less text accordingly.
4
5
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 8 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - Books & Magazines
Book in Library Non-purchased book
$8.99
Preview of a book Purchased Magazine - Stack
Purchased Magazine - Issue
Non-purchased magazine issue
$8.99
Non-purchased magazine subscription
$8.99/monthApr 201314 issues
"Shared text goes here, shared text goes here Shared text goes here, shared text goes here Shared text goes here, shared text goes here Shared text goes here, shared text goes here…"
Chapter Name Chapter Name
Pinning text from Kobo
1 Pinned text from KoboWe want to show a small screenshot of the book itself. Users should be able to resize the pinned item to show/hide more text.
1
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 9 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Pinned Items - Music, Videos, Images
Images
Music - Albums
Artist NameAlbum Name
Artist Name - Album Name can span several lines.
Song Name Song Name
Music - Songs
Title of the video can span a total of two lines…
youtube.com
Video - from Youtube
Title of the video can span a total of two lines…
Supplementary title if available
Video - from somewhere else
1 Songs cannot be resizedMost pinned items can be resized. Songs however are locked into the default size.
1
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 10 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag & Drop - Pinned Items
Renovations
1 User presses on item and holds User can now move the item. Yellow labelling represent possible destinations.
Destinations:
1 Parent collectionsDrag and drop: Places item into the parent. View remains on current collection
Drag and hold: View animates into the targeted collection & user still has control over the item to place where they please.
Noitification Bar
House
92 Items
1
1
Tap here to create a
collection
Custom
Sub collection24 item
s
6
32
4
5
2 In between pinned itemsUser should be able place the item between other objects. Neighbouring pinned items will move accordingly.
3 Another pinned item - Create collectionIf you drag and drop onto another item, a collection is created. Timing is similar to collections 1.0. The new collection will be placed to the end of the collection list.
The naming dialog instantly appears and once user the user names the collection, it is created at the end of the collection list. The view scrolls over and shows the newly created collection if necessary.
5 Sub-collectionDrag and drop: Places item into the collection. View remains the same.
Drag and hold: View animates into the targeted collection.
6 Shortcut to create collectionDragging an item here should prompt the create collection flow. User can easily create a collection by dragging and dropping into this area. The newly created collection will start with just that one item inside of it.
4 An App - Create collectionCreates a collection that is placed at the end of the collection list on the right hand side.
Create collection flow should be followed.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 11 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag & Drop - Apps
1 User presses on app and holds User can be either coming from the apps drawer, or they could be moving an already pinned app.
Destinations:
Noitification Bar
House
92 Items
Tap here to create a
collection
Custom
Sub collection24 item
s
2
3
2 In between pinned items or open spaceThis will create a new app row in that location. Items will move aside accordingly.
3 App BarApp bars hold 6 apps. If there is room in the app bar, place the app inside the app bar. If there is no room in the app bar, create another app bar just to the right with the one app in it.
2
1
1 Drag and Drop for apps inherit most of the same rulesThe exceptions are outlined on this page.
Renovations
1
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 12 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag & Drop - Collections
Renovations
1 User presses on collection and holds User can now move the pinned collection
Destinations:
Noitification Bar
House
92 Items
Tap here to create a
collection
Custom
Sub collection24 item
s
23
2 Pinned Items areaUsers aren't allowed to pin collections in this area. If the user attempts to do so, move the collection to the left most position.
3 Sub-collectionDrag and drop: Places item into the collection. View remains the same.
Drag and hold: View animates into the targeted collection.
1
1 Parent collectionsDrag and drop: Places item into the parent. View remains on current collection
Drag and hold: View animates into the targeted collection & user still has control over the item to place where they please.
Photos10 item
s
1
3
4
4 Before/after sub-collectionUser can reorder the sub-collections to how they please.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 13 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Apps Bars - Rules for Dragging/Dropping
Noitification Bar... Single apps & App Bars
If a user is dragging a single app over an app bar, they can ONLY place it inside of the app bar (cannot create a collection by merging the two)
Renovations
... Pinned items and App BarsDragging any pinned item (not an app) over an app bar will allow the user to merge and create a collection. The opposite is true as well.
... App Bars and App BarsDragging App Bar 1 onto App Bar 2 will allow the user to drop the apps in App Bar 1 into App Bar 2 (the two app bars become merged).
The dropped apps will keep the same order and simply be placed at the end of the list.
The merge animation includes the following:• The app bar enlarge if necessary. • The shadows of the dragged apps will form to
show where the apps would go if the user were to release.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 14 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Apps Bars - Rules for Dropping Apps
1 App placement orderingThe numbers represent the position names.
2 All app bar arrangementsFollowing 5 app bars show all the arrangements for app bars. For two apps, the only possible arrangement is for the two apps to go into positions 2 and 3. Dropping an app to the top or bottom of the centered app(s) will determine which position it will go into.
For three apps, the positions are 2,3,4, and so on. The shadows should represent that.
2
3
4
1
5
1 2
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 15 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Drag&Merge + Drag&Drop
Pinned Item
App
Create collection
Drag
App Bar App Bar
Merge Target
Drop app in to App Bar
Create collection
Result
Pinned Item
App Bar
Create collectionPinned Item
App
Create collection
Pinned ItemApp Bar
App Bar
Merge app bars
Pinned Item
BreadcrumbPinned Item
moved into target breadcrumb
Pinned Item
Pinned Item moved into target
collectioncollectionPinned Item
BreadcrumbAppApp bar moved
into target breadcrumb
collectionApp App moved into target collection
BreadcrumbApp BarApp bar moved
into target breadcrumb
Drop Target
App Bar
Drag
collectionApp bar moved
into target collection
Result
Time
1 23
4
1 User drags item over merge target
2 User drops item, before merge cue - Item returns to original location
3 Merge cue activates after ###ms. Merge target animates to a visual cue for collection creation
4 User drops item, creates sub collection with target item. collection scrolls to the location of the newly created collection.
Time
1 2 45
63
1 User drags item over drop target
2 User drops item, before drop cue - Item returns to original location
3 Drop cue activates after ###ms. Drop target animates to a visual cue for collection creation
4 User drops item, moves item into the new target location, in the first available location.
5 View animates to the target location after ###ms (ex. if the target is a sub collection, that collection is expanded into view, and user can place the item where they like)
6 User can drop the item to wherever they please.
Drag & Merge Options
Drag & Drop Options
Drag & Drop Interaction Timeline
Drag & Merge Interaction TimelineNote: We should be inheriting rules from
Android to differentiate a drag&merge from moving aside pinned items. Once we detect
that a user wishes to merge, we should follow the timeline stated on this page.
The reason for the slight delay in after a drag and merge is detected is to improve
usability: With the ability to merge large and small items alike, the possibility of
mistakingly merging two items together is high - hence the time buffer.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 16 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Deleting Items
1 User presses on item and holds User can now move the item. Yellow labelling represent possible destinations.
Noitification Bar
House
92 Items
1
Tap here to create a
collection
Custom
Sub collection24 item
s
1 Delete BarWhen a user is dragging and dropping any moveable item, the remove bar comes down from the top. Drag and drop here will delete the item (Inherit collections 1.0 rules for deleting. Ex. deleting collections will prompt a dialog).
This bar will be a light overlay that shows only if an item is currently being moved.
Renovations
1
Remove
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 17 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Intoduction
House
92 Items
1
3
3 User drops item, same location. Resize mode activatedThe item is still transparent. Resize handles show around the item
1 User long presses on an image.
2The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets
The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here The shared text or URL gets pinned here
Resizing handles - Item that needs to
maintain aspect ratio
Resizing handles - Item that does not need to maintain
aspect ratio
4
5
2 Item becomes larger and transparentUser drops the image without moving it to a new location
4 Pinned items with images have handles on the cornersItems that respect the aspect ratio while resizing (items with images) will have handles on the corners. The user can still grab onto any edge.
5 Pinned items with w/o images have handles on the sidesItems that do not respect the aspect ratio while resizing (items w/o images and widgets) will have handles on the sides. These are items that can strictly resize horizontally or vertically.
Activating resize mode
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 18 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Case 1
House
92 Items
2
36
1
4
7
4 Target shadow shows where the item will be placedIf the user were to drop the item, the shadow represents where the actual item would go. As such, items should move accordingly as the shadow grows/shrinks.
1 User long presses, activates resize mode.
2 User starts dragging from bottom right cornerAs soon as the resizing starts, the resizing outline and handles disappear. The target shadow of the item however should now be visible underneath the image.
3 User drags continually resizes. The transparent image should follow the users touch.
5
5 Adjacent image moves along with the shadowAs the shadow grows, the image is pushed aside to the right accordingly,
6 User enlarges item past the 594px thresholdAfter the user makes the item large enough to be placed in the middle, the shadow moves to the middle, all images are moved aside as a result.
7 Bottom image moved aside as a result of the larger resized item. As the image crosses the threshold, the target shadow updates to show that the item will now be placed in the middle, and any items in the way will move aside to the right accordingly.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 19 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Case 2
2
1
3
5
4
7
4 Target shadow shows where the item will be placedIf the user were to drop the item, the shadow represents where the actual item would go. Because all items are stacked to the left, the shadow actually grows to the right (pushing any items aside).
1 User long presses, activates resize mode.
2 User starts dragging from bottom left cornerAs soon as the resizing starts, the resizing outline and handles disappear. The target shadow of the item however should now be visible underneath the image.
3 User drags continually resizes. The transparent image should follow the users touch. Notice that although the user is dragging the corner over other items, the shadow still dictates where the item will be placed. Thus no items are moved just yet.
5 User enlarges item past the 594px thresholdAfter the user makes the item large enough to be placed in the middle, the shadow moves to the middle, all images are moved aside as a result.
7 Bottom image moved aside as a result of the larger resized item. As the image crosses the threshold, the target shadow updates to show that the item will now be placed in the middle, and any items in the way will move aside to the right accordingly.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 20 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing - Case 3
3
1
2
4
5
3 Images to the right move in, fill emptied space. As the target shadow gets smaller, neighbouring items fill any emptied space.
1 User starts dragging from bottom right cornerAs soon as the resizing starts, the resizing outline and handles disappear. The target shadow of the item however should now be visible underneath the image.
2 User drags continually resizes down. The transparent image should follow the users touch. Notice that although the user is dragging the corner over other items, the shadow still dictates where the item will be placed. Thus no items are moved just yet.
4 User shrinks item past the 594px thresholdAfter the user makes the item small enough to be placed on either side, the shadow moves to the top, all images are moved aside as a result.
If the user is resizing from the bottom-up then the resulting smaller image gets placed at the top. If the user resizes from top-bottom then the opposite occurs.
5 Neighbouring items fill emptied space.
Disclaimer: Document is not indicative of final graphic design, colour and exact scale. For identification of elements & their relationships only.
Confidential and Secure Handling Required
Page 21 of 21Reading Life - Collections - Pinned ItemsVersion: 1.0 | Published: July 15, 2013 | Created By: Shanak Rahman ([email protected])
PAGE TITLE:
USER STORY:
HIERARCHY:
WIREFRAME
Resizing Rules
Song
Widgets
Video
Pinned Text
Website w/ Image
Kobo Book
Website - No Image
Album
Pinned Item
Images
Kobo Magazine
Text from Kobo
Other
Video image increases by height/width, metadata by width
only
300 px width
Default Size
Other
Aspect Ratio
Aspect Ratio
Horizontally/vertically
Limited by screen height
Spec is maximum default size. If content does not fill max default size, card is shorter in height
(enough to show full content)
Album image
Album image, artist, song name
Book cover, progress bar
Spec is maximum default size. If content does not fill max default size, card is shorter in height
(enough to show full content)
Specified by widget
Aspect Ratio
Defined in spec
Website title, description, URL
Limited by screen heightDefined in spec
Defined in spec
Image & Text
No resizing
Text only (small icon)
Text icon, text
Image & Text
Defined in spec
300 px width
300 px widthImage onlyBook cover increases by
height/width, progress by width only
Max Size
Text only (small icon)
Default Size
Specified by widget
Max reached when all available information is shown
Specified by widget
Image only
2 lines for title, one line for URL
N/A
Image
Video image, 2 lines for title, one for
source
Book cover increases by height/width, progress by width
only
Aspect Ratio
Max reached when all available information is shown
Limited by screen height
300 px width Aspect Ratio
300 px width
Spec is maximum default size. If content does not fill max default size, card is shorter in height
(enough to show full content)
Type
N/A
Defined in specImage only
Defined in spec
Composition
Only image resizes, text area increases in width only
Image only
Max reached when all available information is shown
Default Size
300 px width
Defined in spec
Aspect Ratio
Limited by screen height Aspect Ratio
Aspect Ratio
Resize Notes
Text only (small icon)
Min Size Resize Type
Book cover, progress bar
Aspect Ratio
Limited by screen height
Text icon, text
Limited by screen height
Specified by widget
Default Size