Creating Dashboard 'Cards' in Knack

I have just written a blogpost on how to create dashboard style 'Cards' in Knack for displaying KPIs and similar data...

You can read about how to do this here:

As usual, I would welcome further input and comment either here on on my blog!


Julain got it going perfectly thanks, even included some background-color and made it a conditional display rule to adjust the version being displayed.

Thanks again for sharing the finding !

Thanks Julian, apologies maybe I should wake up before I test things.out.

I missed seeing those words in the code snippet 


The code used to calculate the content of the car has a title in it - Storage Used - this is just an example title and you can change it to anything you like. You can also change the colour (red in the example) and so on.

Hi Julian I like it.

But for some reason I am getting a weird title on the top as in the image below. Any thoughts ?




Julian, this is AWESOME! THANK YOU! Question…what would I need to change in the code to have the shadow go 100% around the card box instead of just on 2 of the edges? Thank you again!!

Hi Gary,

Change the box-shadow css to something like this:

box-shadow: 0px 0px 15px 3px #aaaaaa;

Changing the 15px will alter the blur, and the 3px the spread.