How to customize your Cards with HTML & CSS

The “Cards” template is particularly flexible when it comes to the layouts you can achieve and the content you can include. But sometimes it can be tricky to work out what you want to show and how.

In the table below, you can find some particularly unique ways of using the “Cards” template with custom HTML and CSS: from adding collapsible sections, to hyperlinks, and even embedding other Flourish visualizations.

You can take inspiration from these examples, or even copy this code directly into your “Cards” visualization and work from there.

Note: When using these examples, remember to change the column names displayed with Handlebars syntax {{ }}. This needs to exactly match  the column headers in your own visualization for the custom code to work as expected.

For example, if the code reads {{Title}}, you should have an equivalent column in your datasheet with a header name that reads “Title”.

TIP: You can also add custom HTML and CSS in the Data tab. However, you will notice that simply linking to a CSS' containing column might not apply the specified changes automatically. In such cases, use {{{ }}} – for example, {{{Title}}}.