Trying to (re)position avatars and badges over images in list


#1

Having a real hard time trying to position various elements inside an item inside a list. We want an item to have a main image (that spans the full width of the item), with an avatar vertically centered on top and left of center and then we want a badge to display top-right of the avatar.

Here’s a mockup of a 3 item list showing cards, avatars and badge positioning: