Note: These cards will switch to a 3 column layout on tablet, 2 columns on mobile, and 1 column on small mobile. You can alter the overlap distance which will automatically change the shift distance on hover by editing the CSS variable at the top of the CSS in the Custom CSS toggle in the parent row. Be sure to leave the unit as vw for responsiveness:

:root {
–bb-overlap-card-1-shift: 15vw;
}


You can have as many or as few cards as you like by duplicating the inner sections and the layout will adjust accordingly. You can also place any content inside the inner sections to use the cards for different purposes.

If you would like to reverse the order of the cards on smaller screens, you can add this CSS:

@media all and (max-width: 1024px) {
.bb-overlap-card-1 > .kt-inside-inner-col > .wp-block-kadence-column:nth-of-type(1) {
order: 5;
}
.bb-overlap-card-1 > .kt-inside-inner-col > .wp-block-kadence-column:nth-of-type(2) {
order: 4;
}
.bb-overlap-card-1 > .kt-inside-inner-col > .wp-block-kadence-column:nth-of-type(3) {
order: 3;
}
.bb-overlap-card-1 > .kt-inside-inner-col > .wp-block-kadence-column:nth-of-type(4) {
order: 2;
}
.bb-overlap-card-1 > .kt-inside-inner-col > .wp-block-kadence-column:nth-of-type(5) {
order: 1;
}
.bb-overlap-card-1 > .kt-inside-inner-col > .wp-block-kadence-column:nth-of-type(6) {
order: 0;
}
}

Jane Brown

Sales Manager

Affogato prism coloring book locavore, sus swag neutra. Prism pok pok microdosing tattooed, raw denim raclette ramps disrupt vexillologist.

John White

HR Director

Affogato prism coloring book locavore, sus swag neutra. Prism pok pok microdosing tattooed, raw denim raclette ramps disrupt vexillologist.

Jess Gray

CMO

Affogato prism coloring book locavore, sus swag neutra. Prism pok pok microdosing tattooed, raw denim raclette ramps disrupt vexillologist.

James Pink

CFO

Affogato prism coloring book locavore, sus swag neutra. Prism pok pok microdosing tattooed, raw denim raclette ramps disrupt vexillologist.

Jen Green

COO

Affogato prism coloring book locavore, sus swag neutra. Prism pok pok microdosing tattooed, raw denim raclette ramps disrupt vexillologist.

Jack Black

CEO

Affogato prism coloring book locavore, sus swag neutra. Prism pok pok microdosing tattooed, raw denim raclette ramps disrupt vexillologist.