Dashboard tile anchors (table of contents)

The code for this example can be used in the Markdown visualization to create tiles that act as anchors to create a table of contents for a dashboard.

Best practice dictates using lowercase references. Use Markdown query tiles (from the workbook) instead of dashboard text tiles to build these anchors.

Example code

Anchor/header tiles

<style>
.md-card { 
  display: flex;
  background: linear-gradient(
    132deg,
    #8eecd5 2.13%,
    #9DAAF4 67.53%,
    #F7A8CB 90%
  );;
  padding: var(--size4);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  justify-content: center;
  height: 100%;
  align-items: center;
  margin-block: 0;
}
</style>
<h1 class="md-card">Overview</h1>  

Table of contents

<style>
  a {
    color: #E40473;
    text-decoration: none; 
    font-size: 14px; 
    border-radius: 10px;
    border: 2px solid #D3D3D3;
    margin-left: auto;
    padding: 10px; 
    margin-right: 10px;
  }
.navbar{
  background-color: #; 
  padding: 30px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
}
.right {
  display: block;
  position: absolute;  
}
</style>
<nav class="navbar"> <span style="color:#E40473;padding: 15px;font-size: 20px;">Sections: </span> 
<a href="#section1">Overview</a>
<a href="#section2">Organic Marketing</a>
<a href="#section3">Paid Marketing</a>
</nav>
<hr style="border: none; border-bottom: 2px solid #FF1493; margin: 0; width: 100%; padding-top: 15px">