In this blog, we’ll learn how to create dynamic HTML cards in Power BI using DAX. These cards display match information like team names, logos, scores, and match status — all in a beautiful visual format.
We’ll also explore how to insert dynamic column values using the &Table[ColumnName]& syntax inside your HTML code.
🧠 Why Use HTML Cards in Power BI?
Power BI is powerful, but standard visuals can sometimes feel limiting. Here’s why HTML cards stand out:
✅ Full control over design and layout
✅ Professional and branded visuals
✅ Great for live dashboards (like cricket scores or player stats)
✅ More engaging for the viewer
🛠️ Step-by-Step: Build Your First HTML Match Card
✅ Sample DAX Measure: Cards
Cards =
"<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial; display: flex; justify-content: center; align-items: center; height: 100vh; }
.card { background: white; padding: 15px; border-radius: 10px; width: 350px; margin-bottom: 10px; }
.header { font-size: 14px; color: gray; font-weight: bold; }
.teams { display: flex; justify-content: space-between; margin: 10px 0; }
.team { display: flex; align-items: center; font-size: 16px; font-weight: bold; }
.team img { width: 25px; height: 25px; margin-right: 8px; border-radius: 50%; }
.score { font-size: 16px; font-weight: bold; color: #444; }
.status { font-size: 14px; color: gray; margin-top: 5px; }
</style>
</head>
<body>
<div class='card'>
<div class='header'>" & All_Matches_Score[ms] & " • " & All_Matches_Score[matchType] & " • Start: " & FORMAT(All_Matches_Score[dateTimeGMT],"dd-mmm-yy - hh:mmAM/PM") & "</div>
<div class='teams'>
<div class='team'>
<img src='" & All_Matches_Score[t1img] & "'>
" & All_Matches_Score[t1_SN] & "
</div>
<div class='score'>" & All_Matches_Score[t1s] & "</div>
</div>
<div class='teams'>
<div class='team'>
<img src='" & All_Matches_Score[t2img] & "'>
" & All_Matches_Score[t2_SN] & "
</div>
<div class='score'>" & All_Matches_Score[t2s] & "</div>
</div>
<div class='status'>" & All_Matches_Score[status] & "</div>
</div>
</body>
</html>"
🖼️ Sample Output (Visual):
Add a screenshot or GIF of the rendered card in Power BI
📊 Schdule Card (Overview Page)
📍 Results_Cards – Match Summary Style Card
Results_Cards = "
<div class='match-card'>
<div class='time'>"&FORMAT(Schedule[Date],"dd-mmm, hh:mm AM/PM")&"</div>
<div class='venue'>"&Schedule[Location]&"</div>
<div class='teams'>
<img src='"&Schedule[Team1Logo]&"' class='team-logo'>
"&Schedule[Team1]&"
</div>
<div class='teams'>
<img src='"&Schedule[Team2Logo]&"' class='team-logo'>
"&Schedule[Team2]&"
</div>
<div class='status'>"&Schedule[Status]&"</div>
</div>"🧬 CSS Styling:
.match-card {
background-color: #fff;
border-radius: 10px;
padding: 15px;
width: 240px;
border: solid 1px #B3B3B3;
margin-top: 10px;
margin-bottom: 20px;
}
.teams {
padding: 7px 0;
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
}
.team-logo {
width: 25px;
height: 25px;
margin-right: 10px;
}
Cards_HW – Location Highlight + Linked Venue
Cards_HW = "
<div class='match-card'>
<div class='match-header'>
<span><a href='#' class='venue'> "&Schedule[Location]&", "&Schedule[-]&"</a></span>
</div>
<div class='teams'>
<img src=' "&Schedule[Team1Logo]&"' class='team-logo'>
"&Schedule[Team1]&"
</div>
<div class='teams'>
<img src=' "&Schedule[Team2Logo]&"' class='team-logo'>
"&Schedule[Team2]&"
</div>
<div class='time'>
"&Schedule[Date]&"
</div>
<div class='status'> "&Schedule[Status]&"</div>
</div>"
🎨 CSS Styling:
.match-card {
background-color: #ffffff;
border-radius: 10px;
padding: 15px;
width: 700px;
margin-bottom: 20px;
}
.match-header {
font-size: 14px;
}
.venue {
color: #0073e6;
text-decoration: none;
}
.team-logo {
width: 30px;
height: 30px;
margin-right: 10px;
}
.status {
font-size: 14px;
color: #555;
}
Top Player Card:
Top_Players = "
<div class='card'>
<div class='card-header'>"&Records[Type]&"</div>
<img class='player-img' src='"&Records[IMG]&"' alt='Faf du Plessis'>
<div class='player-info'>
<div class='player-name'>"&Records[Name]&"</div>
<div class='stats'>"&Records[Value]&"</div>
<div class='label'>"&Records[Type]&"</div>
</div>
<div class='footer'>1st Position </div>
</div>
"CSS Code:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background: white;
width: 360px;
border-radius: 15px;
text-align: center;
overflow: hidden;
}
.card-header {
background: linear-gradient(to bottom, #19398a, #061e59);
color: white;
padding: 10px;
font-weight: bold;
}
.player-img {
width: 100%;
height: auto;
}
.player-info {
padding: 15px;
}
.player-name {
font-size: 25px;
font-weight: bold;
color: #222;
}
.stats {
font-size: 30px;
font-weight: bold;
color: #222;
}
.label {
font-size: 20px;
color: gray;
}
.footer {
border-top:solid 1px #DCDCDC;
background: #ffffff;
padding: 10px;
font-weight: bold;
color: #11141c;
cursor: pointer;
}🧠 Power BI Concept: "&Table[ColumnName]&"
This syntax injects dynamic values into your HTML code.
Example:
"Match between " & All_Matches_Score[t1_SN] & " and " & All_Matches_Score[t2_SN]
✅ This becomes:
Match between India and Australia
⚙️ How to Use in Power BI
Copy the HTML code into a DAX measure
Add
HTML Viewer by DevScopeorHTML Content Viewer by K TeamDrag your HTML measure into the visual
Enjoy dynamic, row-wise visuals!
🙌 Final Tips
✅ Use valid URLs for team logos
✅ Use
FORMAT()for date/time✅ Use visuals that support raw HTML
✅ Optimize card width based on your Power BI layout
🎬 Bonus Idea: YouTube Integration
If you’re explaining this on YouTube:
Show the measure creation step-by-step
Explain the
"&Table[ColumnName]&"logicAdd a live demo inside Power BI
Click here to get Entire dashboard
Watch Tutorial on Youtube