Have you every 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