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, usetarget="_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>