Need help? We've got your back.

The Empty Div element is used to design different types of symbols, shapes, etc. This element is not to be mistaken with the Box element. Because you cannot use other elements directly within the Empty Div.

This element works like the non-grid property. So, you can place an empty div element outside of the normal grid layout and position it anywhere on the screen as it does not depend on the grid layout. This also means you can use it to create shapes smaller than a unit square grid.

Anyways, in this article, we’ll make a shape with the Empty Div and use it on a card.

Make sure you have your card designed. For the purpose of this tutorial, we’ll just use a block having cards within it. Once you have the card ready, drop the empty div element from Elements -> Empty Div option on the left sidebar. Drop it inside the card.

We want to create a small circle and place it on the top left corner of the card. So, ensure the width and the height are the same so that we get a perfect circle. To do that, right-click on the empty div and open the editing panel. 

To position the div on the top left corner, use the top and left options. Since we’ve dropped the empty div inside the card, the top and left values are applied relevant to the card itself.

Now, we’ll create our shape which will be a circle. To do that, go to the Styles tab. Expand the Radius / Rounded corner option and then give the value for all sides: 50% (percentage). 

Let’s add a background color to finish the design. You can do that from the General tab.

By the way, you can use other elements inside the Empty Div element using the non-grid property for those elements. But, this is not the purpose of the Empty Div element as you can use the Box element for those tasks.