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.

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

230913 - Update image corner radius scaling #2153

Open
ratinsl opened this issue Sep 20, 2023 · 1 comment
Open

230913 - Update image corner radius scaling #2153

ratinsl opened this issue Sep 20, 2023 · 1 comment

Comments

@ratinsl
Copy link

ratinsl commented Sep 20, 2023

@saiponnada and I realized that the corner radius of images needs to be adjusted to match our radius strategy.
Currently, it looks like the corner radius is 8px across all images - first spotted on the home page item tiles.

Image Corner Radius should follow:

  • Size of 80px and above = 16px radius
  • Size of 79px and below = 8px radius
image

Link to Figma documentation.

@ianmcburnie
Copy link
Contributor

For fully responsive behavior, this will require CSS container queries, which not all browsers support. However, I think this is something we could consider as a progressive enhancement, i.e. in those browsers that do support it, they will get see the correct border radius as the container size changes, for those browsers that don't they will see a fixed border radius.

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Container_Queries#

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Todo
Development

No branches or pull requests

3 participants