New examples feel sergio

[SergioCasCeb]

• Changed the example design to somehow resemble the Gmail style
• Added a drop-down arrow to specify that the examples can be expanded
• The quick-use button is now hidden until the user hovers over the example
• This new design also allows to reduce the spacing of the example card even further

[netlify[bot]]

✅ Deploy Preview for thingweb-playground ready!

Name	Link
🔨 Latest commit	1ee98da6b7f008e096de20b67223fb63dc6c662d
🔍 Latest deploy log	https://app.netlify.com/sites/thingweb-playground/deploys/65772945fe3ce2000877dafc
😎 Deploy Preview	https://deploy-preview-540--thingweb-playground.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[egekorkan]

The downwards arrow is sometimes hidden by the use button when it shows up. It happens when the example name is too short, I think.

[SergioCasCeb]

@egekorkan, yes I have added a type of spacing to provide a more clean visible icon, without having it clash with the title, similar to how Gmail hides a part of the text when hovering on an email to show the extra icons. As you mentioned though this does hide the arrow icon when the title is too long.

If this is not the desirable approach, I can either:

• Reduce or crop the actual text of the title
• Already have some extra space on the card to account for the icon, though this will make the cards longer.

[egekorkan]

similar to how Gmail hides a part of the text when hovering on an email to show the extra icons.

Yes but that is clear to the user as just some part of the text disappears and the text is not a clickable element. Here, we actually lose functionality.

Already have some extra space on the card to account for the icon, though this will make the cards longer.

I like this more. The difference should be minimal :)