How to make each of your cards link through to another website

Sometimes, you might want to use our Cards template to link through to some other content.

And by using custom HTML, this isn't hard at all! Just follow these simple steps:

1
Add a column to your datasheet with the links you would like each card to link to


2
Make sure you bind that column to a column binding in the "Select columns to visualize" panel. This makes sure the information is actually passed to the visualization. We used "Text" in this example.

3
Under the Cards settings, switch on "Customise card HTML"

4
Wrap your card in a link and point to the column with the links using curly brackets
<a target="_blank" href="{{Link}}">
<div class="image-container"><div class="image" style="background-image: url({{Image}})"></div></div>
<div class="primary">
<h1 class="title">{{Name}}</h1>
</div>
<div class="secondary">
<h2>{{Name}}</h2>
</div>
</a>
5
Add optional styling to your link to take away the underline
<style>
a{text-decoration: none;
};
</style>