Has anyone managed to recreate Material Design Cards inside of Bubble using a shape’s settings (border style, etc.)? I’ve recently been experimenting with using shapes inside of my Repeating Groups to emulate the cards’ pure and minmal presentation of text and small images, but I could use some tips on the UI settings that might get at something close to the Material Design Cards.
These would make for a GREAT Plugin - sure, there are plenty of UI elements we could add to Bubble, but I have been finding that I am using shapes in nearly every repeating group to enhance the UI/UX for my mobile-centric apps… having a polished look on ‘background shapes’ would take things over the top. It doesn’t need to be anything complicated, perhaps just some extra shadow effects inside of the shape’s settings panel would do. Google Home’s app is great use case of elegantly displaying data inside of groups:
1 Like
Hey @supernaturally 
You can do this with a shape element, but I’d recommend using a Group instead which can produce the same effect, as well as contain the text and icons within each ‘card’. Here’s a forum app example (feel free to copy the formatting and use it as a Style for Groups in your app!)
In order to get the shadow effect on the cards, the main setting needed is to select “Shadow Style: Outset” in the Group’s property editor:
“Horizontal Offset” will affect how the shadow is displayed on the left and right sides of the group, and the “Vertical Offset” affects how the shadow is displayed on the top and bottom of the group. In order to get the ‘card’ look, we want the shadow mainly on the bottom so that’s why ‘horizontal offset’ is 0 and vertical offset is 1. If the setting were horizontal offset: 0 and vertical offset: -1, the shadow would be on the top side of the group, instead of the bottom. If you were to increase the vertical offset to something like 10, that would make it seem like the group’s shadow had much more depth:
After adding the shadow, I then increased the blur radius to make it look more like a drop shadow, as well as decreased the grey color’s opacity. It took me a little while to get the hang of these shadow settings, but I don’t think you can really go wrong if you always set the horizontal offset to 0 and the vertical offset to something between 1 and 5.
8 Likes
Amazing! Thanks for posting this tutorial @fayewatson . I’m working over my mobile app and it is already beginning to take on a more natural and elegant feel. Well done!
1 Like
Happy to hear @supernaturally! No problem at all! 
What font are you using in your example, its very nice.
Those fonts are Roboto (700) and Roboto (300). I believe they are the same ones that Google uses on their Material Design site.
Noto Sans and Open Sans are also quite nice, too. 
1 Like
Thank you so much. I was thinking about this card style.
