Create a row of boxes in Carrd

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.

Create a row of boxes in Carrd
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:
notion image
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

  1. Set your Container to Columns – as many as you want
    1. notion image
  1. Under Appearance, set Background to Color, and set your colour choice
    1. notion image
  1. Then set Border to the same colour as the Background of your page/site, and set the Width
    1. notion image
  1. 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)
    1. notion image
  1. Now, you can add content to the boxes – an icon followed by centered text works well
    1. notion image
 
📌
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.
We hope you liked this tutorial. Check out other Carrd tips & tricks.

We send weekly, very short emails featuring Carrd resource links

Join the Starrt mailing list

Subscribe

Written by