The goal was an inviting start page: more room, easy to take in at a glance, and carrying your corporate identity all the way to the top. That is what the new Hero header style is for.
Hero runs the navigation horizontally across the top and gives the buddy bar a vertical bar of its own, floating beside the board and always within reach. The search box sits in the middle of the header, under a line that greets people by name.
Around it, the styling options grew: framing and a readability overlay so a headline sits quietly on top of a photograph, a new arc overlay, and a spacing slider that sets how much room the elements on a board give each other.
A hero search box, and a buddy bar that floats beside the board
With the Hero header, the central search box gets a hero rendering of its own: larger, centered, and right where the eye lands.
The buddy bar becomes a vertical bar that floats beside the board and is always within reach. Open an item and it expands over the board, so onboarding tasks, birthdays and shortcuts stay one click away without claiming a column of the layout. On a phone the central search box uses the buddy rendering, so search and the buddy bar behave as one thing on a small screen.
Every board says what it is for
A board can carry a description, and the header puts it right under the title. “Bookings, revenue, customers and people, all in one place.” Someone who lands on a shared board knows what they are looking at before they read a single widget.
Personal boards show the description as a tooltip, and it travels through configuration packages, so a board that arrives from a package comes with its own explanation of what it is for.
Two header styles, and a welcome tagline
Header style is the first choice in a theme, and it applies across all your boards. Hero gives the header its own full width, with the navigation running horizontally across the top. Condensed keeps the header compact, puts that space back into the board, and is the style that lets you choose between vertical and horizontal navigation.
The Hero style brings a welcome tagline with it: a line at the top of the header that greets people by name. It sits behind a switch, so you decide whether your hub opens with a greeting or gets straight to the content.
A background editor for the photo you actually wanted
Set the zoom, move the image horizontally and vertically to frame the part worth seeing, and add blur for depth. A building, a landscape, a team photo: each gets the framing you had in mind when you picked it, without a second version of the file.
The readability overlay is what lets you use the busy, high-contrast image you actually wanted. Switch it on and a gradient settles over the top of the background, in the color and the strength you choose, and you set how far down it reaches. Your headline reads cleanly and the photograph keeps all of its detail.
On top of that comes an overlay: None, Gradient, or the new Arc. Gradient fades the background into the content underneath. Arc draws a curve across the header, and you choose whether it curves up into a dome or down into a valley. Both take their color from the Overlay color slot, so they follow the rest of your palette. The overlay also decides how the background behaves: with one, it scrolls along with the content, without one it covers the full height of the screen.
Spacing, and colors for the small things
Spacing is a slider that sets how much room sits between the elements on a board. Pack them closer together for a dense operational dashboard, or give them more breathing space for a communication board people read. One slider, and the whole board changes character.
The color slots reach further too. Alongside Brand, Text and Background, a theme carries its own Badge Color and Buddy Color. The header has a set of its own as well: the icons and the buddy bar in their normal and their active state, and the color of the welcome message, the tagline and the text beside them. All of it set separately for light mode and dark mode.
Ready when you are
All of this is live. Open the Design panel in the admin center and edit your theme: header style at the top of the left column, spacing right below it, and the backgrounds on the right, per light mode and dark mode.
Want us to build your brand into it with you? Book a demo.
