Dashboard tile anchors (table of contents)

Markdown visualizations and dashboard markdown text tiles can include links to other tiles within the dashboard. This is a nice way to create a table of contents or "back to the top" links or buttons to help users move around a longer dashboard.

Linking to existing charts

Any HTML element with an id on the page can be referenced as an anchor point to jump to. Every chart tile on the dashboard has a unique ID that is based on the title of the tile. For example, if the title of your tile is Top Performing Brands the corresponding ID is top-performing-brands and you can reference that anchor point with a markdown link like this:

(Jump to brand analysis)[#top-performing-brands]

or if you are writing HTML in the markdown editor, like this:

<a href="#top-performing-brands">Jump to brand analysis</a>

Creating your own anchors

If you are making more complex HTML-based markdown tiles, you can also include IDs in your element tags. It's a bit more complex to reference these IDs in other markdown tiles. Because we sanitize the HTML and markdown for security, we replace all user-generated IDs with a user-content- prepended to the provided ID. For example, if you write this HTML:

<article id="brand-analysis">We sell lots of stuff!</article>

then you will need to reference it like this:

<a href="#user-content-brand-analysis">Jump to brand analysis</a>

Tip: if you need help getting the ID for any element, you can also use your browser's code inspector to locate the element.

Example code

The following example references the video at the top of the page.

Anchor/header tiles

Each of the 3 colorful headers in the above example serve as anchor destinations to navigate too. For this example, each hading has been created using a separate markdown visualization in the workbook, each titled to match the text inside the heading. Below is the code for the "Overview" heading.

<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

The table of contents can be created using a dashboard text tile.

<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="#overview">Overview</a>
<a href="#organic-marketing">Organic Marketing - Detail</a>
<a href="#paid-marketing">Paid Marketing - Detail</a>
</nav>
<hr style="border: none; border-bottom: 2px solid #FF1493; margin: 0; width: 100%; padding-top: 15px">