How to replicate this style (used in another app)

How can I replicate this header style?

  • I’ve discovered the Side Menu feature is coming (eta?)

ScreenClip

Is there a similar grid-style component?
I need to display multiple sub-lines of the information under the main item. The > arrow is also needed.

• Given that this appear to be a custom header, it’s just a container with a background color and icons and text (static, links, data, etc.) set into it. The container is then set to Absolute over a scroll view. How to do this has been covered many times here in the community. I’ll quote a tutorial I wrote a few days ago for positioning a custom header properly:

• For the “sub-lines” part, the components with the prices and dates appear to be one of the default ‘list’ components available on the left-hand side of the editor. Drag it onto your canvas and then double-click to enter isolation mode. You could then drag more text components in and style it as appropriate to look just like in the image.

That’s the high level breakdown. Then you’d move into more complex factors like connecting a backend and streaming data collections to those lists. Hope that helps get you started. :slight_smile:

1 Like