4.x - Add "cover" as a shape option for card component

[bspeare]

As a user of the card component, I would like to stretch my card image to fill the vertical space of the card using the "cover" shape option that applies the object-fit property.

Proposed solution

Shape

• Circle
• Widescreen
• Widescreen: cover
• Square
• Square: cover

With padded

Without padded

You can preview this functionality in https://github.com/uiowa/uids/pull/803.

[joewhitsitt]

Do we want to entertain the idea of a widescreen vs square "shape" cover or am I not thinking responsively?

[bspeare]

@joewhitsitt Yes, that could be a good idea!

[joewhitsitt]

I guess I can visualize the square cover compared to the default cover screenshot above, but I am not sure what a widescreen cover would look like since the height would be determined by the card content.

[bspeare]

That's true. A widescreen ratio quickly becomes something else once the card fills up with text:

Perhaps promising the aspect ratio as part of the cover is not the best solution.