Skip to main content
Card - Image
Girish Gilda avatar
Written by Girish Gilda
Updated over a week ago

HTML blocks are used to provide a structure to your SaaS app. A card is one such element. It is a flexible container that includes a header, body, and footer.

Card - Image is an HTML block in which the Card includes an image in the background.

To add a card to your page, click on “Add New Block”.

Then select HTML as the block type.

Select “Card - Image” from the block dropdown.

Then add a background image. You can either do this using the image URL or directly upload the image.

Then mention the image position within the card.

Adjust the margin and padding of your card.

Padding: Padding is the space that’s inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side

Margin: Margin is the space between the border and the next element of your design. Think of the space outside the border and between it and the other elements. This is all the margin. Margin goes around all four sides of the content and you can target and change the margin for each side.

Click on "Add" and your card with image will be added.

Editing the card

Once you have added the Card - Image, you may want to edit it later.

For this go to the “Build With No-Code”. Then click anywhere on the Card-Image blog. The edit section will open on the left side.

Here, you can edit the card as per your requirements.

Did this answer your question?