Need advice on design

Hello how can i make the orange part on the picture?

I tried to have Row with 4 columns but i don’t know how to add paddings, SVG icon, and the wording.

Thank you

there is no padding in cells but i dont know if you would need it either, because you can set the dimensions of the whole row, on the other hand, if you think you need padding you can add a container in each cell.

I would avoid using Row as it is not the most responsive solution also the padding is a little bit tricky.
What I suggest is a Container with horizontal layout, something similar:


I have simple buttons there, but instead for your use case it would be advised to use containers. The inside containers should have vertical layout. The top part can be another container with a coloured background and shape: large-rounding or fully-rounded. Inside the container there would be an icon.
Under the icon-container your desired text:
But here it is without further styling:


So the layout tree:

Main layout container layout settings:

Single item container layout settings:

Styling for the icon container:

Note that you have to figure out the right font-size, and sizing of the icon container as well. Also if you need specific icons that are not available yet natively among the icons simply upload an img from any icon set you can find on the internet.
*sorry for the repeated text, I just copy pasted the containers to show the layout…

Let me know if there are any other questions.

My “Icon Container” does not have Style tab like you do. What am i missing?

First place a “container” to the location then place an “icon” inside. The “icon container” will be the external container you placed first.

Also for the style, choose any of the preexisting styling options and “edit” them. Then to avoid conflicts with other elements, just “create a new style”. Double check if the new style has been applied to the component, sometimes it’s just created and not applied.