Skip to main content
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>
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 to. 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.
Example 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

Use a dashboard Markdown text tile to create the 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="#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">