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

Create your own Cards visualization now! »

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>

Related Articles