Card

Display information, photos, and more in a compact, easy-to-understand layout with the Gutenberg Card block. This block allows you to add cards to describe your product, service, or person.

How To Add The Card Block #

1. 1.Open a page or a post and click on the plus icon to add a new block and look for the Card or you can search for it if it doesn’t pop up quickly for you.
2. 2.By default, you’ll get the below design-

How To Configure The Card Block #

To configure the content of your Card block, switch to the ‘Content’ tab.

General #

Number of Cards – Increase or decrease the number of cards.

Stack on – Choose None, Tablet or Mobile as options to decide the breakpoint at which the columns will stack on one another.

Z-Index – This option specifies the stack order of the block. Greater stack order is always in front of an element with a lower stack order. Increase the value to place the card block in front of all other blocks.

Image #

Enable Image – Choose to Hide or Display images inside Card Block. If the toggle is ON, you will get an option to upload an image for each card individually.

Image Settings #

Size – Select a size for the image as full, medium, large, or thumbnail.

Image Position: You can select the position of the background image for the block from here. If you want to show the top left part of the image, select the position as left top. Similarly, choose the part of the image that you want to display from Left Top, Left Center, Left Bottom, Right Top, …, Center Bottom, etc.

Image Repeat: You can choose to repeat the image on the x-axis, y-axis, or on both axis.

Image Size: You can select the size of the image as cover, auto, or contain from here.

Custom Height – Increase or decrease the height of the image.

Column Background #

You can select a background type for the block from here. The options available are:

1. 1.Color
2. 2.Gradient
3. 3.Image

Button Settings #

Choose to open the link in a new tab.

Button Size – Select a size for the image as small, medium, large, or extra-large.

Button Border

Border Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.

Rounded Corners – You can give border-radius to the box from here.

There are options to customize the button padding and margin separately for Vertical and Horizontal.

Under the Colors settings tab, color options are available for Button and Button Text.

How To Style The Card Block #

Switch to the ‘Style’ tab to style all the elements of the Card block. You can customize ‘Icon’, ‘Spacing’, ‘Border’ & ‘Color & Typography’ as per your preference.

Typography #

Under the Typography tab, options for font family, font size, font weight and line-height are available for Title, Sub-title and Content.

Icon Settings #

Select an icon to display on the button from here.

Icon Position – You can display the icon after or before the text.

Icon Color – Select a color for the icon.

Icon Hover Color – Select a color on hover for the icon.

Spacing #

Spacing tab offer options to customize the spacing for Title, Sub-title, Content, and Block.

Border Settings #

Border Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it

Border Width – Set a width for the border from here.

Border Color – You can give color to the border from here.

Border Radius – You can give border-radius to the box from here.

Box Shadow – You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.

Text Color Settings #

Under this tab, the color option is available for Text.