Card with image (preview inside) #601
ouvreboite
started this conversation in
Ideas
Replies: 1 comment
-
|
An alternative way to design this would be to reuse the group feature: <div role="group">
<figure>...</figure>
<article>...</article>
</div>It might a more "progressive" solution (if you want to add the feature to an existing article, you just have to wrap it, you don't need to restructure it) and remove the need for an ambiguous |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
👋 Thank you for this awesome project.
Live-demo with a card and various image ratios:▶️ link
I would like to propose an improved/alternative version for the Card, that would allow to define an image that would be displayed on the left part. Or on at the top on mobile.
Something like that:
(desktop)
(mobile)
Implementation and design:
I have spent some time on the idea, trying to make it work by simply adding an
<img>or<figure>in the current<article>, but I'm unable to make it work well enough, and I think this would create a regression for users that already use images in their Cards.Instead I propose to have another syntax available (that won't replace the current one) to more simply hande the "two columns" aspect of this feature (using a basic grid + a flex container for the aside):
Semantic
<figure>seems good to me. It can also be used to add some text or link inside the image.<aside>as it contains the "main" content of the card. Using<main>or<body>would be nice, but those are reserved elements.** Other stuff**
Beta Was this translation helpful? Give feedback.
All reactions