Note: The structure of these flip cards must be maintained for them to function. You can increase or reduce the number of columns in the row holding the cards, and use any blocks inside the labelled front and back rows that make up the cards. Background colours are defined in the front and back row background settings. You must set a minimum height in the sections labelled ‘card 1, card 2 etc.’ and this can be different for desktop, tablet and mobile. All the cards will adjust their height to match the tallest card.

Note: Change the images in the section background settings and the height in the section structure settings. The overlay on hover colour is defined in the CSS in the parent row’s CSS toggle. Change the RGBA value in the background property of this section:

.bb-info-box-slide-1 .kt-blocks-info-box-text {
align-items: center;
transform: translateX(-100%);
transition: all 0.5s ease;
padding: 20px;
background: rgba(0, 0, 0, 0.8);
}

Note: You can adjust the background colour of the text content area by editing the CSS in the Custom CSS toggle of the parent row.

At the bottom you will find this CSS:

.bb-info-box-window-1 .kt-infobox-textcontent {
background: var(–global-palette7);
}

Change the global palette value to between 1-9

Note: These info box tabs use minimal CSS to add some shadows for depth. All other styling is controlled within the blocks.

The coloured strip on the right is set in the section’s background gradient and the width of the strip is set in the right padding.

If you change the size of your icon or its padding, you may need to also adjust the icon’s negative left margin. If you do this, add the same positive margin value to the info box’s left margin field.