Header and footer
Add a bar pinned to the top or bottom of the screen for a logo, a close button or the purchase button.
The header and footer are two optional bars. They are not in the palette: you add them from Layers.
Add it
In Layers, click Add Header or Add Footer. Each is selected as soon as it is added. Remove one with Delete in its … menu.
- The Header stays at the top while the content scrolls. A new one is a horizontal stack with space between, so a logo and a close button sit at opposite ends.
- The Footer stays at the bottom, always visible. Put the Purchase button here. A new one is a vertical, centered stack.
If the first item in the content is a full-width image and there is a header, the image slides up behind the header.
Where they can go
Only one of each, at the top or bottom of the screen. You cannot rename, duplicate or drag them. They hold anything a Stack can.
Design panel
The panel is the full Stack panel for the bar. Defaults: padding 12, Fill width, Fit content height, no fill.
States
None.
Dark mode and screen sizes
Add a fill and text colors with dark values. A tall footer takes space from the scrolling content on small phones.
Tips and common mistakes
- Give the footer a fill, or content scrolls visibly behind it.
- Keep it short, especially on the iPhone SE preview.
In the JSON
The types are header and footer, kept in the screen's header and sticky_footer slots, each with one inner stack.