cards

Cards are not a standard block but use a range of blocks to construct a unique layout. Check the individual cards for compatibility.

https://brandandbuildtemplates.me/kadence-cloud/category/cards/

Jack Black

Si longus, levis. Sed quanta sit alias, nunc tantum possitne esse tanta. Res enim concurrent contrariae.

• Facebook
• Instagram
• Twitter

John Green

Si longus, levis. Sed quanta sit alias, nunc tantum possitne esse tanta. Res enim concurrent contrariae.

• Facebook
• Instagram
• Twitter

James White

Si longus, levis. Sed quanta sit alias, nunc tantum possitne esse tanta. Res enim concurrent contrariae.

• Facebook
• Instagram
• Twitter

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 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. You can change this however you choose and it will remain invisible until hover.

In order to have a smooth transition on hover, we have to define a max-height for the hidden block. This is set using a CSS variable in the Custom CSS toggle of the parent row:

:root {
–bb-hover-reveal-cards-1-height: 100px;
}

If you increase the hidden content length or the number of columns in the row, you may need to increase the max-height variable above 100px for all the content to display on hover.

The CSS is wrapped in a media query so the hidden content and the gradient overlay show by default on tablet and mobile. You can change the breakpoint of that media query by adjusting the ‘1025px’ value, or remove the media query altogether.

Note: The ‘see more’ buttons on these CTA cards are actually part of the subtitle field and styled as buttons using the ‘highlight’ text feature. The image overlay block does not provide settings to style highlighted words so this is done via the CSS in the parent row’s Custom CSS settings. If you use highlighted text, it will adopt the colours you have set for your buttons in the customiser.

Explore London

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore New York

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore Paris

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore Sydney

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore Moscow

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore Tokyo

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore Dubai

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

Explore Rome

Celiac ascot pork belly, crucifix cronut jianbing tattooed.

See more

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 ‘card 1, card 2 etc.’

Jenny Green

Web Designer

Jane Black

Web Developer

Jessica White

Content Creator

John Brown

Product Support

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

Street art biodiesel asymmetrical selfies yuccie poutine drinking vinegar cloud bread flannel sus gochujang.

Jack Black

Job title

Street art biodiesel asymmetrical selfies yuccie poutine drinking vinegar cloud bread flannel sus gochujang.

John Green

Job title

Street art biodiesel asymmetrical selfies yuccie poutine drinking vinegar cloud bread flannel sus gochujang.

James White

Job title

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);
}

Change the background variable colour value.

Title

Lorem ipsum dolor sit amet.

Title

Lorem ipsum dolor sit amet.

Title

Lorem ipsum dolor sit amet.

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 back row background and background overlay 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: 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 how many networks you add, and they will always stick to the bottom regardless of the amount of content above. The colours for the social icons is pulled from your customiser colour settings, but you can override these in the block settings.

Jenny Black

Lead Designer

Wayfarers literally blog DIY try-hard. Ascot enamel pin vibecession tattooed franzen, artisan post-ironic poutine deep v 8-bit kogi you probably haven’t heard of them whatever occupy gochujang.

• Facebook
• Twitter
• Pinterest
• LinkedIn

John Green

Designer

Pinterest poke stumptown, iceland keffiyeh selvage snackwave freegan banh mi tbh wolf yr ramps trust fund. Aesthetic sartorial celiac crucifix selvage meggings banjo VHS.

• Facebook
• Twitter
• Pinterest

Jessica Pink

Designer

Swag jianbing typewriter. Synth kitsch vaporware, viral forage cronut intelligentsia ramps pabst crucifix schlitz salvia cliche umami. Letterpress meh edison bulb succulents kogi narwhal, dreamcatcher marfa listicle cardigan church-key cloud.

• Facebook
• Pinterest
• Instagram
• Dribbble
• Behance

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.

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.

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 controlled by the height of the spacer/divider block in the image sections.

The static section is for the right side content (this is not displayed on tablet & mobile). The hidden section is for the animated content (this will show on tablet & mobile)

Colours are set in the background settings of the static & hidden sections. You can include any content you wish inside these sections and both cards will adjust their height to the tallest card.

For more cards, simply duplicate the parent row (you can remove the CSS from the Custom CSS toggle in the parent for any duplicated rows, it only needs including once.)

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.

Jenny Green

Web designer

Skills:

HTML, CSS, Javascript, UX/UI design.

• Pinterest
• Dribbble
• Behance

Jane Black

Web Developer

Skills:

PHP, Ruby, Python, React.

• GitHub
• Reddit
• CodePen

Jessica White

Content Creator

Skills:

Ascot enamel pin tattooed franzen.

• Facebook
• Twitter
• Medium

John Brown

Product Support

Skills:

iceland keffiyeh selvage snackwave.

• Pinterest
• Dribbble
• Behance

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-2-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.

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.