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:

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

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

Under the Cards settings, switch on Customise card HTML.

Wrap your card in a link and point to the column with the links using curly brackets. If you would like your link to open in a new tab, add target="_blank". If you would like your link to open on the same page, add target="_top". Please note the links won't open within the editor. To preview how your links open, we recommend viewing your visualization in a full-screen preview.

The example below opens the link in a new tab. If you'd like to open it in the same tab, simply replace "_blank" with "_top".

<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>

Add optional styling to your link to take away the underline

<style>
a{text-decoration: none;
};
</style>

If you aren't using a background image, you will need to add style="flex: 1;" to your link to ensure the whole card is clickable and not just the text on it. Here's what your card code will look like in this case:

<style>
a {
  text-decoration: none;
  color: black;
}
</style>


<a target="_blank" href="{{Link}}" style="flex: 1;">
  <div class="my-card">
    <div class="primary">
      <h1 class="title">{{WKNR}}</h1>
    </div>
    <div class="secondary">
      <h2>{{Read}}</h2>
    </div>
  </div>
</a>

If you don't have a link for each card, you can also add some text wherever you do have a link and wrap just that text in the link. For example, in the below example, only one of our cards has a link:

We achieved this by adding an extra column called "Read" and adding the text we want to appear with the link. As you can see, only one of our cards has a link – and only that one has some text in the "Read" column.

Here's the custom HTML we used to wrap the "READ MORE" in a link:

<style>
a{text-decoration: none;
color: black;
};
</style>


<div class="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>{{Quote}}</h2>
</div>
<div class="tertiary">
<p>
<a href="{{Link}}">{{Read}}</a>
</p>
</div>