<aside> 📌 How to add these paper corners to text boxes in a Carrd.co site

</aside>

Step 1 – add the box

• Add a Text element to your page and enter your text content into it.
• Go to the element's Settings tab (cog icon), then the Styles tab.
• In the Text box, add the below CSS code:

position: relative;
background-color: #EBEBEB;
padding: 15px 20px;
min-height: 200px;

• The background-color is the colour for your box.
• Change the padding if you want different spacing around the box content.
• You don't need the min-height line unless you want to force a height, or if you have a row of these boxes and want equal heights.

Step 2 – add the corner

• Go back to the element's Settings tab (cog icon), then the Element tab.
• Add a unique CSS class name in the Classes box (e.g "paper").
• Add the below code to a hidden Embed element in your Carrd website.

<style>
.paper:before {
content: '';
position: absolute;
top: 0; 
right: 0;
border-top: 15px solid #f8f8f8;
border-left: 15px solid #E0E0E0;
width: 0;
}
</style>

• Change the class name ('paper') to whatever you used.
• Change the border-top and border-left px value to adjust the size of the folded corner.
• Change the border-top colour to your page background colour, so it looks transparent.