@page "/"

<span class="pageheader">Selected Controls</span>
<br />
<p class="pagecontent">The following Syncfusion Blazor components can be set up in an application for you with the Syncfusion Blazor Template Studio. A fast, easy start with Syncfusion Blazor components lets you concentrate on the important part: learning.</p>
<div class="controlregion">

 <h5 class="productheader"> Data Visualization</h5>
<ul class="ulstyle">
	<li class="list">
 	<NavLink class="nav-link" href="heatmapchart-features">
 	<span class="syncfusion-blazor-index-icons syncfusion-blazor-icon-heatmapchart" aria-hidden="true"></span>HeatMap Chart
 	</NavLink>
 	</li>

</ul>

</div>
<style>
    .ulstyle {
        margin-top: 10px;
        margin-bottom: 20px;
        display: inline-block;
        list-style-type: none !important;
        padding-left: 0px !important;
    }

    .controlregion {
        margin-top: 50px;
    }

    .pagecontent {
        font-family: sans-serif !important;
font-size: 16px;
color: #333333;
letter-spacing: 0.34px;
line-height: 24px;
margin-top: 10px;
    }
    

    .list {
        float: left;
        line-height: 40px;
        min-width: 280px;
        font-family: sans-serif !important;
        font-size: 19px;
        color: #0073DC;
    }

    .syncfusion-blazor-index-icons {
        font-family: "sbicons";
        color: #0073DC !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        padding-right: 13px;
        font-size: 18px;
    }

    .productheader {
        font-family: sans-serif !important;
        font-size: 19px !important;
        color: #333333 !important;
        letter-spacing: 0.41px ;
    }

    .pageheader {
        font-family: sans-serif !important;
        font-size: 24px !important;
        color: #333333 ;
        font-weight: bold !important;
    }
</style>