top of page

Creating Dashboard 'Cards' in Knack

Updated: Jun 23, 2020

Those of you who have been looking at alternatives to Knack often cite the ability to create 'cards' on their dashboards and other pages. For those who don't know what I mean by cards, this is what we're going to create:

In this case the numbers refer to a photo club database...

So I set about trying to find the simplest way to create these cards in Knack using as little code as possible.

The Knack Solution

It turns out that the solution to this problem is simple - you just need to create a CSS 'class' for the 'box' the card is in:

/*for producing Cards...*/ .card { box-shadow: 10px 10px 8px #aaaaaa; padding: 7px 10px; width: 100%;

text-align: center; border-radius: 7px; }

Simply copy this code into your CSS editor in Knack - and you can always play around with the settings yourself...

The next step is to set up a Text Formula field to display your data and the heading within the card. Once again this is quite simple - here's an example (using the New Builder):

And here's the formula for you to copy:

<div class="card"> <h3 style="color:red;">Storage Used</h3><hr />{Image Storage Used}</div>

You can edit this formula, replacing {Image Storage Used} with the field you want to display on the card and Storage Used with the heading for the card. The <hr /> puts the horizontal line between the heading and the data value. Obviously you can also change the colour etc.

Finally, you just need to add the formula fields to a view (I used a 3 column view - again in the New Builder):

You're likely to want to delete out the view's heading and also the field labels.

So, that's it! Knack is a very versatile platform and with small amounts of code you can really make it look great.

1,788 views3 comments

Recent Posts

See All

Choosing the Right No Code Platform

I am regularly asked about which No (or Low) Code platform to use for a particular customer requirement so I thought it would be interesting to write a post going through a couple of recent case studi


Specifically what type of view? Is the text formula in a connected object to the data? Thank you.


Julian Kirkness
Julian Kirkness
Sep 10, 2020

Hi Clyde - I'm afraid I don't - I'm a database guy first and JS/CSS user reluctantly! Anyone else?????


Clyde James
Clyde James
Sep 07, 2020

Works perfectly - this is great functionality thank you Julian. In the example above, do you know how to maintain the three horizontal cards inline - even when viewing in mobile?

bottom of page