Possible to replicate this UI with a repeating group?

Need help
1

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

image
image1920×1433 119 KB

2

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.

3

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

1 Like
4

@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.

1 Like
5

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?

6

thanks @boston85719 for the insight!

1 Like
7

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

1 Like
8

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!

1 Like
9

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

image
image1876×1268 402 KB

1 Like
10

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

1 Like
11

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

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

In addition ,

  1. Contrast is low , make it higher
  2. Buttons need to be min height 36 or 40 . and max 48
  3. Irrelevant stuff needs to be smaller . Make them 12px. Lower button font px to 14px.
  4. 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.
1 Like
13

Thank you everyone! We should share more UI designs