search

ithaka / pharos

JSTOR's design system
https://pharos.jstor.org
MIT License
112 stars 15 forks source link

Update image card and collection card placeholder state #774

Open fswlee opened 3 days ago

fswlee commented 3 days ago

At present, when there is no image available for an image card or a collection card, we show a grey background with an information icon and a message "Image preview not available". See image card and collection card.

We want to make several updates:

  1. the state of the card should be called something like a 'placeholder' state rather than an error state
  2. we want to use a placeholder image to better communicate the issue at hand for the user--that there is no image at present. placeholder card examples

2a. the placeholder image should be vertically and horizontally aligned within the square 2b. the small version of the image should be used for the image card (48 width) and the large for the collection card (64 width). I've supplied versions in both sizes

PlaceholderSmall PlaceholderLarge

daneah commented 3 days ago

@fswlee does it make sense to add the placeholder as part of the system iconography instead?