Possible to replicate this UI with a repeating group?

ramzizi · 2024-11-09T06:40:53.293Z

This UI looks amazing, I’m not sure I’d be able to build this myself with my skills. Just wanted to highlight a cool design idea for a repeating group

image1920×1433 119 KB

randomanon · 2024-11-09T07:19:11.122Z

Not sure what is amazing about this or why you wouldn’t be able to build it with a repeating group. This is standard cookie-cutter stuff, just images and text.

Kim_Brian · 2024-11-09T07:19:33.635Z

Its possible with bubble and the trick is about conditionals on the group and use of modulo operator.

boston85719 · 2024-11-09T07:23:45.032Z

@ramzizi The color of the cards is connected to a data field or option set text value that represents a hex code like #00000 and is related to the Company color of logo, which is why blue for twitter and red for airbnb, it is not using modulo operator.

There is a group that contains all things in colored area and another group below that contains button and brief details. The color group has a background color set to dynamic value referencing either option set or data field for hex code.

Also uses borders and margins well. This type of stuff is not difficult to replicate, especially if using the inspect tool in browser to see the exact dimension of elements and other design settings.

ramzizi · 2024-11-09T07:27:02.846Z

I’m working on building it now. If I don’t want the color to coordinate with the specific company, how do I have the repeating group cycle through a set palette of colors?

Kim_Brian · 2024-11-09T07:29:26.661Z

thanks @boston85719 for the insight!

boston85719 · 2024-11-09T07:29:47.667Z

ramzizi:

repeating group cycle through a set palette of colors?

Can do random or sort orders or make use of modulo operator

ramzizi · 2024-11-09T07:31:25.108Z

Thanks @boston85719 and @Kim_Brian ! I always think doing something on Bubble is going to be too challenging, and end up proving myself wrong each time. You can do pretty much anything with Bubble!

ramzizi · 2024-11-09T20:33:35.190Z

Thanks for your help, came out looking pretty good I think!

image1876×1268 402 KB

randomanon · 2024-11-10T09:42:19.773Z

Is the border radius you’re using for the outer card the same as the inner card?

georgecollier · 2024-11-10T10:06:29.821Z

ramzizi:

came out looking pretty good I think!

Yes! A few changes you can make to fully replicate:

You need slightly less padding on the main card
The background colours need to be darker
Make use of bold fonts to show hierarchy/what’s important.

emir.ozgun · 2024-11-10T10:19:42.140Z

In addition ,

Contrast is low , make it higher
Buttons need to be min height 36 or 40 . and max 48
Irrelevant stuff needs to be smaller . Make them 12px. Lower button font px to 14px.
Font change , boldness change , or margin change I call them hidden borders , if you use one of these and add border in addition to seperate them that is double counting . Never do double counting. But if you really need to do double counting , make the margins much larger.

ramzizi · 2024-11-10T15:52:28.061Z

Thank you everyone! We should share more UI designs

system · 2025-01-18T06:40:54.457Z

This topic was automatically closed after 70 days. New replies are no longer allowed.