Create Dynamic IPL Match Cards in using HTML

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

  1. Copy the HTML code into a DAX measure

  2. Add HTML Viewer by DevScope or HTML Content Viewer by K Team

  3. Drag your HTML measure into the visual

  4. 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:

Leave a Reply

Type to search

Shopping cart

0
image/svg+xml

No products in the cart.

Continue Shopping