# 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 (cf-mc-banner), which is a static coloured callout strip: this one is a large animated hero block with its own typography and a CTA. | **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 Aurora drift This is an animated banner with a button [Try it for free›](https://marketplace.atlassian.com/apps/1234376/capable-for-confluence-all-in-one?hosting=cloud&tab=pricing) ### Mesh, Slate: Mesh gradient THIS IS A LABEL Mesh gradient This is an animated banner with a label ### Constellation, Cobalt: Welcome to the team space Welcome to the team space This is a subtitle ### Constellation, Slate: Constellation Constellation This is an animated banner. --- ## Settings ![The Animated banner configuration modal showing an Aurora drift banner reading welcome to the team space, next to background, theme, background colour, height, label and title fields.](https://help.gocapable.com/images/43748408-c5b0-4f04-9f62-a515b71c6355.webp) The background treatment, theme, height and banner text sit in one panel, with the result previewed beside them. | **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 animated background treatment. The first four are drawn with CSS; the remaining six are drawn on a canvas. | | Speed | Calm / Balanced / Lively (0.55× / 1× / 1.7×) | How fast the background animation moves. | | Background colour | A brand or custom colour, or cleared (the panel then reads "Using default background" with a "Reset to default" button once set) | The flat base colour sitting behind the animated effect. The headline, subtitle, button and legibility scrim all re-derive themselves from this colour's brightness, so a light base flips the text to dark automatically and stays re | | Accent colour | A brand or custom colour, or cleared ("Using theme accent" / "Reset to theme") | The highlight colour of the animated effect and of the small dot beside the Label. Setting it replaces the theme's effect colours with a light-to-dark ramp built from your colour. On a light background the dot is darkened automati | | Height (px) | 120–600 | How tall the banner block is. The value is clamped when you leave the field rather than while 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, preceded by a coloured dot. Leave it empty and neither the label nor the dot renders. | | 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, constrained to about half the banner width so it never runs under the animation's focal point. | | Button | Free text, up to 40 characters (placeholder: "Optional button label") | The call-to-action label. Leave it empty and there is no button, and the Button link row does not even appear in the config panel. | | Button link (type) | None / URL / Page | How the button resolves where it goes. URL takes a web address; Page opens a Confluence page picker; None shows "No link" and suppresses the button entirely. | | 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. | --- ## Related [BackgroundWraps a block of page content in a coloured or photo-backed container so it stands out from the](https://help.gocapable.com/macros/background.html) [BannerA full-width photo banner or rotating carousel, each slide carrying a headline, a line of body ](https://help.gocapable.com/macros/banner.html) [Panels and bannersThe rest of this family.](https://help.gocapable.com/macros/panels-and-banners.html) --- _Give the eye somewhere to land._