Component library · 8 designs
Power BI report header designs
The header is the band at the top of a page that says what the page is about, which period it shows and, often, holds the one or two filters everything else depends on.
Each design below is drawn with the brand kit's colour roles (page, surface, text, accent), so it changes with the theme you pick. The shapes and text go into the page background image; any slicer, page navigator or button in a header is a real Power BI visual placed over it.
By Nawaf Sharaf · Founder & Reliability Engineer · Updated
Free for commercial useAccent bar with date filter
A full-width bar in the accent colour with the page title, a one-line subtitle, your logo and a date-range slicer on the right. The strongest header: use it on the first page of a report.
Native Power BI visuals: Slicer.
Positions on a 1280 × 720 page
Visual X Y Width Height Date (Slicer) 984 28 264 40 Minimal title with rule
Title and subtitle on the page colour, separated from the content by a hairline. Takes the least attention; suits detail pages and reports printed to PDF.
Background artwork only: no visual containers.
Title with KPI strip
Title on the left and three compact card slots on the right, so the headline numbers sit in the header instead of taking a row of their own. Good on dense 1280 × 720 pages.
Native Power BI visuals: Card × 3.
Positions on a 1280 × 720 page
Visual X Y Width Height Total Revenue (Card) 536 24 216 56 Gross Margin % (Card) 784 24 216 56 Orders (Card) 1032 24 208 56 Title with two filters
Title left, two dropdown slicers right-aligned in the header. Keeps the filters every visual depends on in one obvious place without a filter pane.
Native Power BI visuals: Slicer (dropdown) × 2.
Positions on a 1280 × 720 page
Visual X Y Width Height Region (Slicer) 768 24 224 48 Channel (Slicer) 1008 24 240 48 Breadcrumb with back button
A Back button and a breadcrumb trail for drill-through and detail pages, so readers always know where they came from and how to return.
Native Power BI visuals: Button.
Positions on a 1280 × 720 page
Visual X Y Width Height Back (Button) 24 20 96 40 Title with page tabs
Title left and a horizontal page navigator right. The tabs are a real Power BI page navigator, so they list and switch the report's pages by themselves.
Native Power BI visuals: Page navigator.
Positions on a 1280 × 720 page
Visual X Y Width Height Pages (Page navigator) 720 28 536 40 Card header with side stripe
The header as a floating card with an accent stripe on its left edge and room for the logo. Matches pages built from separate cards rather than full-bleed bands.
Background artwork only: no visual containers.
Inverted band
A dark band drawn in the text colour with the title in the page colour: high contrast in both light and dark themes. Use it to mark an executive or summary page.
Background artwork only: no visual containers.
Design rules for headers
- Keep it under 100 px
On a 1280 × 720 page a 96 px header leaves 624 px for content. Taller headers push charts below the fold on laptops.
- Title says the question
“Revenue against target, year to date” beats “Sales dashboard”. The subtitle carries the period and units.
- One accent, used once
Use the accent colour for the band or a stripe, not both, so the data colours stay the brightest things on the page.
Add a component to your report
- 1
Pick a theme and download
Choose a theme above (or open the component in the Design Studio to use your own brand kit), then download the page folder (.zip).
- 2
Save your report as a .pbip
In Power BI Desktop, File → Save as → Power BI project (.pbip) with the PBIR format, then close Desktop.
- 3
Copy the page folder in
Copy definition/pages/<page> into <YourReport>.Report/definition/pages/, add the page name to pageOrder in pages.json, and register the background PNG in report.json. INSTRUCTIONS.md in the zip has the exact JSON.
- 4
Reopen and connect fields
Reopen the .pbip. The background and every native visual are placed; drag your fields onto slicers and charts, set button actions that need a target (a page or bookmark) and create bookmarks for bookmark navigators.
Frequently asked questions
Are these headers images or real Power BI visuals?
Both, split the way Power BI works: shapes, text and icons go into the page background image; slicers, page navigators, bookmark navigators, buttons and chart placeholders are real visual containers in the PBIR page folder. 5 of the 8 designs on this page include native visuals.
Do they use my brand colours?
Yes. Every component is drawn from the brand kit's colour roles (page, surface, text, muted, accent, status and data colours) and fonts. Pick a theme here, or open a component in the Design Studio and set your colours, fonts and logo in the Brand panel before exporting.
Can I add one to a page I already designed?
Yes. In the Design Studio, open Insert → Components and click a component: it is drawn in your design's brand and placed where it belongs on the page (a header at the top, a footer at the bottom), scaled to your page size.
Which Power BI Desktop version do I need?
The page folder uses the PBIR report format, the default report format from the September 2026 Power BI Desktop release; older reports can be saved as PBIR with File → Save as → Power BI project. The page-folder export is in beta until we finish checking it in Desktop.