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 hyperlinks you would like each card to link to.

2

Bind the column containing your hyperlinks under Text in the Data tab.

3

Back in the Preview tab, turn on the Cards >  Customise card HTML toggle.

4

At the very top of the text box, use the hyperlink HTML tag, pointing to the links-containing column using curly brackets, like so:

<a href="{{Column_name}}">

If you would like your link to open in a new tab, add a  target="_blank" property. If you would like your link to open on the same page, use  target="_top" instead.

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

5

Add optional styling to your link – for example, you can turn off the default hyperlink underline.

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

6

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>

7

If you don't have a link for each card, you can add one more column in the Data tab, and only add text for the card with a hyperlink. In the below example, only the first 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>