Perspective design help to recreate header from Vision

I’m trying to recreate this from Vision:


I think i need to use the coordinate container as the bats and ball are sitting over the top of other components.

I created this so far in Perspective in the Designer:

However I really want this to all be centred if the display is larger than it’s designed for… but I get this at the moment when I launch it in the browser:

I can’t think of a non-dumb way at the moment to resolve it… I need some help please :slight_smile: I’d like to have the background thinner rectangle extend to the page bounds, but the bats/text/ball centred.

Actually there are lots of other issues with it at the moment…

View attached:
table-tennis-tournament__header.json (21.7 KB)

So I sort of got something working, still have no idea how to add the ball above the ‘i’ in ‘tennis’:

I added a flex container and same spacers

The auto basis in the title doesn’t work very well when the text is put onto 2 lines :thinking: any way around this?

table-tennis-tournament__header.json (17.6 KB)