Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
bspeare opened this issue Oct 20, 2022 · 4 comments · May be fixed by #803
Open

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

bspeare opened this issue Oct 20, 2022 · 4 comments · May be fixed by #803
Labels
4.x 4.x version

Comments

@bspeare
Copy link
Contributor

bspeare commented Oct 20, 2022 •
edited
Loading

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

Screen Shot 2022-10-20 at 12 48 05 PM

Without padded

Screen Shot 2022-10-20 at 12 48 35 PM

You can preview this functionality in #803.
@bspeare bspeare added the 4.x 4.x version label Oct 20, 2022
@bspeare bspeare linked a pull request Oct 20, 2022 that will close this issue
Draft
@joewhitsitt
Copy link
Contributor

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

@bspeare
Copy link
Contributor Author

bspeare commented Oct 21, 2022

@joewhitsitt Yes, that could be a good idea!

@joewhitsitt
Copy link
Contributor

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
Copy link
Contributor Author

bspeare commented Oct 21, 2022 •
edited
Loading

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

Screen Shot 2022-10-21 at 8 43 49 AM

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

@joewhitsitt joewhitsitt mentioned this issue Oct 21, 2022
Merged
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
4.x 4.x version
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Card component "cover" shape proof of concept uiowa/uids
2 participants
@bspeare @joewhitsitt