# Perspective design help to recreate header from Vision

**URL:** <https://forum.inductiveautomation.com/t/perspective-design-help-to-recreate-header-from-vision/38590>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [September 11, 2020, 10:33am UTC](https://forum.inductiveautomation.com/t/perspective-design-help-to-recreate-header-from-vision/38590 "2020-09-11T10:33:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 11, 2020, 10:33am UTC](https://forum.inductiveautomation.com/t/perspective-design-help-to-recreate-header-from-vision/38590/1 "2020-09-11T10:33:06Z")

</div>

I’m trying to recreate this from Vision:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/6/a64e662c96c3337496ba974e6b218bfa4808b647.png)

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:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b62b69a5a4da88af0ef363e2c6ef9987c750e875.png)  
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:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4fd56f0629dce82c38b9ea4e521a3d0da7b0212e.png)

I can’t think of a non-dumb way at the moment to resolve it… I need some help please 🙂 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…

 ![CoordContainerWoes](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e9b8bb7d5c9d93fc071d798255677a154a23ff23.gif)

View attached:  
[table-tennis-tournament\_\_header.json](https://forum.inductiveautomation.com/uploads/short-url/aohSbn4TpbKdkUNo57l4xI5apB2.json) (21.7 KB)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 11, 2020, 10:55am UTC](https://forum.inductiveautomation.com/t/perspective-design-help-to-recreate-header-from-vision/38590/2 "2020-09-11T10:55:01Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/02eebf1810c2e6ca297e86797c106d772f96d793.png)

 ![CoordContainerWoes2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6b3c6d7698ad9c00dc7b76b1c2f61fc7cb350bc6.gif)

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

[table-tennis-tournament\_\_header.json](https://forum.inductiveautomation.com/uploads/short-url/wbvZkOO7ZOl8taj4daXqmmQbjS1.json) (17.6 KB)