Animated banner
A full-width animated hero banner with a label, headline, subtitle and call-to-action button.
Space homepages and landing pages usually open with a wall of text, and nothing tells a first-time visitor what this space is or where to go next. This macro drops in a single polished hero banner: an animated background, an uppercase label, a headline, a supporting line and one button that points at a page or a URL. Reach for it at the very top of a team space home, an onboarding hub or a launch page, anywhere you want the page to announce itself. It is a different macro from Banner, which is a static coloured callout strip. This one is a large animated hero block with its own typography and a call-to-action button.
Type | Stands on its own |
|---|---|
PDF and Word export | See below |
Published Capable Site | Supported |
Name in the picker | Animated banner (Capable) in the suite. The standalone app usually adds the word macro. |
#See it
Every example below is a real macro on this page, not a screenshot, and each one is a configuration taken from a page somebody actually built. Open this page in the editor to see how any of them is set up.
#Aurora, Ocean: Aurora drift
#Mesh, Slate: Mesh gradient
#Constellation, Cobalt: Welcome to the team space
#Constellation, Slate: Constellation
#Settings
Setting | Values | What it changes |
|---|---|---|
Background | Aurora drift, Mesh gradient, Orbit rings, Light sweep, Constellation, Dot wave, Flow field, Bokeh drift, Wave bands, Halftone ripple | The style of the animated background. |
Speed | Calm, Balanced or Lively | How fast the background animation moves. Calm runs at roughly half the Balanced pace, and Lively at nearly double. |
Background colour | A brand or custom colour. Leave it unset and the panel reads "Using default background". Once you set a colour, "Reset to default" clears it. | The flat colour behind the animated effect. The headline, subtitle, button and the shading behind the text all adjust to how light or dark this colour is, so a light background switches the text to dark automatically and keeps it readable. |
Accent colour | A brand or custom colour. Leave it unset and the panel reads "Using theme accent". Once you set a colour, "Reset to theme" clears it. | The highlight colour of the animated effect and of the small dot beside the Label. Setting it swaps the theme's effect colours for lighter and darker shades of your colour. On a light background the dot is darkened automatically. |
Height (px) | 120 to 600 | How tall the banner is. If you type a number outside the range, it moves to the nearest limit when you leave the field, not while you are typing. |
Film grain | On / Off | Overlays a fine noise texture so the gradients look softer and less flat. |
Label | Free text, up to 40 characters (placeholder: "e.g. Onboarding") | A small uppercase, letter-spaced line above the headline, with a coloured dot in front. Leave it empty and neither the label nor the dot appears. |
Title | Free text, up to 90 characters (placeholder: "Banner headline") | The main heading, set large and bold. |
Subtitle | Free text, up to 140 characters (placeholder: "Optional supporting line") | A supporting line under the headline. It takes up about half the banner width, so it stays clear of the busiest part of the animation. |
Button | Free text, up to 40 characters (placeholder: "Optional button label") | The text on the call-to-action button. Leave it empty and there is no button, and the Button link setting is hidden. |
Button link (type) | None / URL / Page | Where the button goes. URL takes a web address, Page lets you pick a Confluence page, and None shows "No link" and hides the button altogether. |
Button link, URL | Any web address (placeholder: "https://…") | The destination when the link type is URL. |
Button link, Page | A Confluence page chosen with the picker ("Start typing page name") | The destination when the link type is Page. |
Not sure where to start? Open Presets and pick a built-in design such as Launch hero, Team welcome or Event CTA, then adjust it. Once you have a banner you like, Save preset keeps it for next time.
#Related
Give the eye somewhere to land.
