Have you ever wanted to create a row of colored or tinted boxes in Carrd, with content within them? Well, there’s a non-obvious way to do that, and without code too.
Have you ever wanted to create a row of coloured or tinted boxes in Carrd, with content within them? Well, there’s a non-obvious way to do that, and without code too.
Let’s say you want to show a row of features or benefits, each in an equal sized box like this:
You can do this with the native Carrd settings.
The following method is a clever combination of the Container background colour and its Border settings, which Jason Leow mentioned in his Carrd Telegram group recently.
Note: If you’d like your boxes to have rounded corners, you will need to follow our other tutorial instead, which uses custom code.
How to create a row of boxes in Carrd
Set your Container to Columns – as many as you want
Under Appearance, set Background to Color, and set your colour choice
Then set Border to the same colour as the Background of your page/site, and set the Width
Also under Border, uncheck Top, Sides, Bottom checkboxes, and check Gutters (if your Container has Padding, you will need to check Flush To edges too)
Now, you can add content to the boxes – an icon followed by centered text works well
📌
Note: You may need to adjust your Container’s Gutters and Padding to make the boxes’ contents centered / equal width
We hope you liked this tutorial. Check out other Carrd tips & tricks.