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:
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.
"_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>
<style> a{text-decoration: none; }; </style>
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>

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