Community forum for knowledge and support

Updated 8 months ago

Adding More Cards to a Section

At a glance

The community member is looking to add more cards to an existing section, but is having trouble getting the additional cards to show up. A community member provides a detailed explanation of how to duplicate the existing cards and adjust the CSS and interactions to accommodate the new cards, but notes that it would be a complex and time-consuming process. The original poster decides to instead add the extra elements in a separate list section, as the community member suggested it may not be worth the effort to add 10 cards in the existing section due to potential scrolling issues.

Useful resources

Hey, does someone know how I can add additional cards to the existing four ones in this particular section? When I simply copy the cards, they don´t show up, I need like 10 cards

M
M
3 comments

yeah this might not be worth the effort but I guess I'll leave that up to you to decide.

Essentially I would start with the top card, duplicate it, then duplicate the card-1 class, rename it to card-5 and give it a z-index of 4. To make it look different, my suggestion would be to actually do a negative rotation of -3 deg on the card, so it just continues out the fanning of the cards. The real pain comes in the interactions, you would have to apply the same cadence in the interactions as the other cards as well, but you'll want to put card-5, card-6, card-7 etc above card-1. Its just easier to add on top of the deck than to try to change the whole deck to account for extra cards, if that makes sense.

I am also not sure you would be able to do 10 cards in this section because then you'd have a ton of scrolling, so you'll have to account for the viewport height setting on layout417_component class to probably be over double the size (from 300vh to 600vh), which again is a lot of scrolling.

Here is a read-only to a project where I've started the process of duplicating, so you get the idea. I didn't make any changes to the interactions but if you still want to move forward with it, I can certainly help with that as well but again, its going to be pretty complicated.

https://preview.webflow.com/preview/matts-fresh-site-44ed7e?utm_medium=preview_link&ut[…]e&preview=0732d0c6dcdec71611381afc6c7a8b85&workflow=preview

Man it´s crazy you even took the effort to explain it this clearly and thoroughly, thanks for that! but as you stated it´s one heck of a pain in the ass to do all that for some extra cards, gonna put that 6 extra elements in a list section down below I guess - but still thanks for taking the time to explain it all!!

Yeah no doubt - one of those "round hole, square peg" problems unfortunately!

Add a reply
Sign up and join the conversation on Slack