AyanHow to Build HTML Project Cards in Power BI
A step-by-step HTML-only guide to building project cards in Power BI using a DAX measure and the HTML Content visual, including where to place the DAX, where to place the CSS, and how to render the card correctly.
How HTML Works in Power BI
Power BI native visuals do not treat raw HTML as a styled web component by default, so HTML-based cards need a visual that is specifically designed to render HTML from columns or measures.
The HTML Content visual is built for this use case and supports dynamic HTML generated from the Power BI data model through DAX.
Where to Put the DAX Code
Create your project card as a measure in Power BI Desktop by going to Modeling > New Measure and pasting the DAX there. The measure should return one complete HTML string for the current filter context.
If your report is filtered to one project, the card will display that project’s values. If multiple projects are in context, `SELECTEDVALUE()` may return blank unless you provide fallback values.
Example HTML measure
Project Card HTML =
VAR CompletionPct =
DIVIDE(
SELECTEDVALUE(Projects[CompletionPct]),
100,
0
)
VAR ProgressWidth =
FORMAT(CompletionPct * 100,"0")
RETURN
"<div class='project-card'>
<div class='header'>
<div class='status'>" & SELECTEDVALUE(Projects[Status]) & "</div>
<div class='priority'>" & SELECTEDVALUE(Projects[Priority]) & "</div>
</div>
<div class='project-name'>" & SELECTEDVALUE(Projects[ProjectName]) & "</div>
<div class='description'>" & SELECTEDVALUE(Projects[Description]) & "</div>
<div class='progress-header'>
<span>Completion</span>
<span style='color:#C4FF6B;font-weight:600'>" & FORMAT(CompletionPct,"0%") & "</span>
</div>
<div class='progress-bar'>
<div class='progress-fill' style='width:" & ProgressWidth & "%'></div>
</div>
<div class='footer'>
<div class='timeline'>" & FORMAT(SELECTEDVALUE(Projects[StartDate]),"dd MMM") & " → " & FORMAT(SELECTEDVALUE(Projects[EndDate]),"dd MMM yyyy") & "</div>
<div class='cost'>₹" & FORMAT(SELECTEDVALUE(Projects[ActualCost]),"#,##0") & " / ₹" & FORMAT(SELECTEDVALUE(Projects[Budget]),"#,##0") & "</div>
</div>
</div>"
Where to Put the CSS
In this pattern, the CSS should be embedded directly inside the same DAX measure using a `<style>...</style>` block. Power BI does not load a separate stylesheet for a DAX-generated HTML measure inside the visual.[web:208][web:212]
That means your `.project-card`, `.status`, `.priority`, `.progress-bar`, and other class definitions should be placed before the main HTML markup inside the returned string.[web:210][web:212]
Example with embedded CSS
Project Card HTML =
VAR CompletionPct = DIVIDE(SELECTEDVALUE(Projects[CompletionPct]),100,0)
VAR ProgressWidth = FORMAT(CompletionPct * 100,"0")
RETURN
"<style>
.project-card{
margin-bottom:20px;
background:#1A1A1A;
border:1px solid #2A2A2A;
border-radius:16px;
padding:22px;
font-family:Inter,Segoe UI,sans-serif;
color:#FFFFFF;
}
.header{display:flex;justify-content:space-between;margin-bottom:18px;}
.status{background:rgba(196,255,107,.12);color:#C4FF6B;border:1px solid rgba(196,255,107,.25);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;}
.priority{background:#262626;color:#FFFFFF;padding:6px 12px;border-radius:999px;font-size:12px;}
.project-name{font-size:16px;font-weight:700;margin-bottom:8px;}
.description{color:#A1A1AA;font-size:13px;line-height:1.6;margin-bottom:20px;}
.progress-header{display:flex;justify-content:space-between;margin-bottom:8px;}
.progress-bar{background:#262626;height:8px;border-radius:999px;overflow:hidden;margin-bottom:20px;}
.progress-fill{background:#C4FF6B;height:100%;}
.footer{display:flex;justify-content:space-between;align-items:center;}
.cost{color:#C4FF6B;font-weight:600;font-size:10px;}
.timeline{color:#D4D4D8;font-size:12px;}
</style>
<div class='project-card'>
<div class='header'>
<div class='status'>" & SELECTEDVALUE(Projects[Status],"N/A") & "</div>
<div class='priority'>" & SELECTEDVALUE(Projects[Priority],"N/A") & "</div>
</div>
<div class='project-name'>" & SELECTEDVALUE(Projects[ProjectName],"No Project") & "</div>
<div class='description'>" & SELECTEDVALUE(Projects[Description],"No description available") & "</div>
<div class='progress-header'>
<span>Completion</span>
<span style='color:#C4FF6B;font-weight:600'>" & FORMAT(CompletionPct,"0%") & "</span>
</div>
<div class='progress-bar'>
<div class='progress-fill' style='width:" & ProgressWidth & "%'></div>
</div>
<div class='footer'>
<div class='timeline'>" & FORMAT(SELECTEDVALUE(Projects[StartDate]),"dd MMM") & " → " & FORMAT(SELECTEDVALUE(Projects[EndDate]),"dd MMM yyyy") & "</div>
<div class='cost'>₹" & FORMAT(SELECTEDVALUE(Projects[ActualCost]),"#,##0") & " / ₹" & FORMAT(SELECTEDVALUE(Projects[Budget]),"#,##0") & "</div>
</div>
</div>"
How to Add the Card to the Report
Install the HTML Content visual from AppSource, because it is designed to visualize measure or column values as HTML in Power BI reports.
After adding the visual to the canvas, drag the `Project Card HTML` measure into the visual’s Values field. The visual will then render the HTML card instead of showing the markup as plain text.
Step-by-step setup
- Open Power BI Desktop.
- Make sure your Projects table is loaded.
- Go to Modeling > New Measure.
- Paste the DAX measure that contains both HTML and CSS.
- Open Get more visuals and install HTML Content.[web:208]
- Add the HTML Content visual to the report canvas.[web:208]
- Drag the Project Card HTML measure into the Values bucket.[web:210]
- Apply filters or slicers to test the card for individual projects.
How to Use This in Your Blog
In your blog, place this example under a section like Example: Project Card HTML Measure and show both parts clearly: first the DAX measure, then the note that the CSS must be embedded inside the same measure.
After that, add a short implementation section explaining that the measure goes into Modeling > New Measure and the result is displayed by the HTML Content visual on the report page.
Practical Notes
HTML Content is available in different editions, including a certified Lite edition and a Regular edition, with the choice depending on your organization’s certification, export, and sanitization requirements.[web:212]
If your design depends on broader HTML, CSS, or external assets, you may need the Regular edition. If your organization requires certified visuals or export compatibility, Lite is usually the safer starting point.[web:212]
