profile card 5

Note: These profile cards work with up to 8 icons (including the + icon). Simply add or delete from the Icon block inside each section. Don’t forget to set your links. Jenny Green Editor-in-Chief Jack Brown Travel Editor Jessica Black Lifestyle Editor Jane White Fashion Columnist

Gallery cards 1

Note: These gallery cards are designed to be used with the ‘slider’ type of the advanced gallery block. The ‘slider’ type is not available in the free version of Kadence blocks, but you can still use these cards with the free version by switching the gallery type to ‘carousel’. The images do not need to…

profile cards 4

Note: These profile cards are contained in their own rows within a section of the main row. Do not alter the structure or you will break the CSS. The images are set in the background settings of the image sections. These sections will show on tablet and mobile and the height of the images is…

infobox cta 1

Note: The background colour of the title and text is controlled via CSS. If you would like to change the colour find the following section of CSS is the Custom CSS box of the parent row: .bb-cta-infobox-1 .kt-infobox-textcontent { position: absolute;    bottom: 30px;    left: 0;    right: 0;    z-index: 3; background: var(–global-palette7);}…

hover reveal card

Note: You can use any block for your hidden content, just ensure the block has a custom CSS class of ‘hidden’ The images are defined in the top level sections, and each section must have a minimum height set in its structure settings. The gradient overlay is defined in the nested row’s background overlay settings….

overlapping cards 2

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…

overlapping cards

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…

profile card 3

Note: If you want to change the angle of the social icons section, edit the clip path in the Custom CSS toggle in the second section of each card’s row layout Jack Black Job title John Green Job title James White Job title

info box slide 1

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,…

profile cards 2

Note: These profile cards are row layouts nested inside sections so you can use a gradient for the top section background. You can increase or decrease the number of columns, but make sure you copy over the border and box-shadow styles from an existing section. The social icons will automatically grow and shrink depending on…

flip circles

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. You must set a minimum height in the sections labelled…

flip card 3

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…

flip cards 2

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…

flip cards 1

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. Images and overlay gradients are defined in the front and…