# Banner A full-width photo banner or rotating carousel, each slide carrying a headline, a line of body text and an optional button. Use Banner for the hero strip at the top of a space home page, a landing page or an onboarding page, the thing a reader sees first. Each slide is a photo with a headline, a short paragraph and an optional call-to-action button that links to a Confluence page or an external URL. With one slide it is a static hero; with several it becomes a carousel with arrows, dots and optional auto-advance. It is a standalone block: you configure it entirely in its own panel rather than typing into it on the page. | **Type** | Stands on its own | | -------------------------- | ----------------------------------------------------------------------------- | | **PDF and Word export** | See below | | **Published Capable Site** | Supported | | **Name in the picker** | 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. ### 3 slides, with images: Confluence is better with Capable ‹› ![Koala](https://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MDM1MTR8MHwxfHNlYXJjaHwxNnx8YWJzdHJhY3R8ZW58MHx8fHwxNzYwMjg3MzAzfDA&ixlib=rb-4.1.0&q=80&w=1080) ### Confluence is better with Capable Capable makes Confluence do more. [Learn more](https://www.gocapable.com) ![Mountain](https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MDM1MTR8MHwxfHNlYXJjaHwxfHxhYnN0cmFjdHxlbnwwfHx8fDE3NjAyODczMDN8MA&ixlib=rb-4.1.0&q=80&w=1080) ### Empower your team This is where the content of your slide goes. [Explore](https://www.gocapable.com) ![Notepad](https://images.unsplash.com/photo-1533158326339-7f3cf2404354?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MDM1MTR8MHwxfHNlYXJjaHwyOHx8YWJzdHJhY3R8ZW58MHx8fHwxNzYwMjg3NTczfDA&ixlib=rb-4.1.0&q=80&w=1080) ### Make your content shine Add images, videos, and more to your content. [Get started](https://www.gocapable.com) ### 3 slides, auto-scrolling, with images: Introducing the new experience ‹› ![Abstract blue gradient](https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080) ### Introducing the new experience A faster way for teams to find, share, and ship knowledge. [See what changed](https://example.com) ![Warm abstract shapes](https://images.unsplash.com/photo-1622547748225-3fc4abd2cca0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080) ### Built for collaboration Comments, reviews, and approvals on the same page. [Explore features](https://example.com) ![Creative workspace flat lay](https://images.unsplash.com/photo-1533158326339-7f3cf2404354?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080) ### Ready when you are Swap in your screenshots and publish in minutes. [Get started](https://example.com) ### With images: New here? Start with the guide ![Team working together](https://images.unsplash.com/photo-1522071820081-009f0129c71c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080) ### New here? Start with the guide Setup steps, templates, and FAQs for your first week. [Open the guide](https://example.com) ### With images: Welcome to the program hub ![Mountain landscape](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080) ### Welcome to the program hub Milestone updates, decision logs, and key resources. [Read the overview](https://example.com) --- ## Settings ![The Banner macro configuration modal with the first slide expanded, showing title, body, image URL, alt text, button text, link type, URL and text colour fields.](https://help.gocapable.com/images/bfd7d711-ef75-44f4-bf78-701a7a76dbf1.webp) Every slide carries its own title, body, image, alt text and button, and the button can point at a URL or at a Confluence page. ![The Banner macro configuration modal showing a photo slide previewed on the left and a list of three slides with an add slide button and an auto scroll toggle on the right.](https://help.gocapable.com/images/3451714f-6f91-4c4e-8f99-8b4344a5a015.webp) Slides are listed in the order they appear and can be dragged to rearrange, with auto scroll set once for the whole banner. | **Setting** | **Values** | **What it changes** | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Slides | A list. Each slide is an expandable row you can drag by its grip handle to reorder, and delete with the bin icon. An "Add Slide" button appends a new one seeded from one of the three built-in sample slides at random. | Each slide becomes one panel of the carousel, in list order. | | Title | Free text. Required. | The slide's large headline. Long titles wrap rather than truncate. | | Body | Free text. Required. Line breaks you type are preserved on the page. | The paragraph under the headline, rendered slightly transparent. | | Image URL | An image URL, a Confluence attachment, or empty. The config field is labelled "Image" and opens the same picker as elsewhere (attachments, pasted URL, Unsplash search). | The slide's background photo, sized to cover. | | Image Alt Text | Free text. | The accessible description of the slide photo, read by screen readers. | | Button Text | Free text. | The label on the slide's call-to-action button. See the caveat: leaving this empty hides the button entirely, whatever link you configured. | | Link Type | URL, Page, None, shown as a compact icon dropdown labelled "Type" | Chooses where the slide's button goes. Picking Page swaps the next field for a Confluence page picker and clears any URL; picking URL clears any page and shows a URL box; picking None shows the text "No link" and hides the button | | Link URL | Any URL. Field is labelled "URL" and only appears when Link Type is URL. | Where the button opens. | | Page ID | A Confluence page, chosen by typing its name in a picker. Field is labelled "Page" and only appears when Link Type is Page. | The button opens that Confluence page. | | Text Color | A brand colour (Text role) or custom, with a clear button. Field description in the panel reads "Overrides the automatic light/dark text. Clear to pick automatically from the image." | Forces the colour of the slide's title, body and button label. Cleared, the macro samples the average brightness of the slide photo and picks white or black. | | Auto scroll | On or off | When on, the carousel advances by itself. Silently does nothing when the banner has only one slide. | | Auto scroll interval (seconds) | 2 to 60, whole seconds. Field is labelled "Interval (seconds)" and only appears when Auto scroll is on. | How long each slide is shown before advancing. | | Corner radius | 0 to 24 pixels | Rounds the whole banner's corners; the slides and photos are clipped to the same shape. | | Shadow | None, S, M, L | Adds a resting drop shadow under the banner. | | Border | Off or on. When on, a Width slider (0-6px) and a colour picker appear. | Draws an outline around the banner. | | Overlay opacity | 0 to 1, in steps of 0.05 | How strong the dark (or tinted) wash over each slide photo is at its strongest point. The wash is a gradient: full strength at the bottom of the slide, a sixth of that at the middle, and clear at the top. Set to 0 to remove it ent | | Overlay colour | A brand colour (Background role) or custom. Panel hint reads "Gradient tint over each slide image, strongest at the bottom and fading out towards the top." | The colour of that wash. It also doubles as the solid fill for any slide whose photo cannot be shown, see caveats. | | Button fill | A brand colour (Accent role) or custom, with a clear button. Panel hint reads "Fill colour for slide buttons. Leave unset to match the slide's automatic light/dark button." Applies to EVERY slide's button, not per slide. | Forces a fixed background colour on all slide buttons. The label takes the slide's Text Color if set, otherwise a colour chosen to contrast the fill. Left unset, each button picks a light or dark variant based on how bright its ow | --- ## 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) [Animated bannerA full-width animated hero banner with a label, headline, subtitle and call-to-action button.](https://help.gocapable.com/macros/animated-banner.html) [Panels and bannersThe rest of this family.](https://help.gocapable.com/macros/panels-and-banners.html) --- _Give the eye somewhere to land._