• Before using the WP Bakery Page Builder, it's important to have a design ready. So, let us start by preparing one.

Note: Please setup `full` for `Single Image` element.

• Firstly, we need to add new `Row` element and enter custom layout for your row: 1/1 + 1/1. Hence, you will reach the layout as below:

Note: You should add `cardview-mobile-box` in `Inner Row Settings`.

• Next step, we will write custom CSS and store in `Page Settings`. You can reference code as below:

.cardview-mobile-box {
        background: white;
        padding-bottom: 32px;
        margin: auto 2px;
        border-radius: 8px;
        box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
}
.cardview-mobile-box > .wpb_column:nth-child(1) > .vc_column-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;	
}
.cardview-mobile-box > .wpb_column:nth-child(1) > .vc_column-inner > .wpb_wrapper > .wpb_single_image > .wpb_wrapper > .vc_single_image-wrapper > img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;	
}
.cardview-mobile-box > .wpb_column:nth-child(2) {
        text-align: left;
}
.cardview-mobile-box > .wpb_column:nth-child(2) > .vc_column-inner {
       margin-top: 24px;
       margin-left: 8px;
       padding-right: 20px;
}
.cardview-mobile-box > .wpb_column:nth-child(2) > .vc_column-inner > .wpb_wrapper > .kleo_text_column > .wpb_wrapper > h2 {
        margin-bottom: 16px;
}