<aside> 📌 How to add more colourful text boxes to a Carrd.co site

</aside>

Style 1 – lozenges

You can see this live on my makerdesign.tools site.

Step 1 – add the text

• Set up a Container element with 4 columns in a Carrd website. In each, add a Text element with your label text.
• Click on a Text element and go to the Settings tab (cog icon). Add a unique CSS class name in the Classes box (e.g "tools").
• Do the same for each Text element (with a unique class name for each).

Step 2 – add the CSS code

The below code needs to be added in a hidden Embed element in your Carrd website.

• Change the classes to the CSS names you used in step 1 (e.g change ".tools" to whatever you used).
• Change the colours as you wish (e.g change "#d14422").
• Change the padding and border-radius as well if you want to tweak the shapes.

<style>
.tools { background-color: #d14422; }
.tutorials { background-color: #0e6bae; }
.templates { background-color: #601aa7; }
.inspiration { background-color: #b11c3c; }
.images { background-color: #2346a5; }
.icons { background-color: #5b5b5b; }
.fonts { background-color: #0a9690; }
.colours { background-color: #2d7f17; }

.tools, .tutorials, .templates, .inspiration { padding: 20px; border-radius: 100px; }
</style>

Style 2 – boxes

You can see this live on my extrasfor.carrd.co site.