Default padding guidance on card organisms?

[kylegilbreath]

Heyo friends 👋! I had a discussion topic around whether or not we want to provide some guidance on what the card container padding should be so we are maintaining consistency on similar pages (i.e. setting type of pages that have a cards for each setting group). For the sake of discussion, let's call this combination of components (card + heading + paragraph + button) an organism. Should we be using a consistent default padding for similar organisms from page to page throughout the same product to maintain consistency?

I know we were purposeful in keeping the card flexible to allow for the end user to easily change the default padding, which I do support. But for these similar organisms, should we be more explicit about which default padding to use, and only advise changing that padding if necessary for a specific purpose.

The complete card sketch symbol has a default padding of 20px, which I've been using throughout my designs, but noticing that some PDs are playing around with this padding in some of their designs and wanted to raise the concern before we get too far along as we start pulling these new components into our designs. I've attached a few pages for reference of potentially similar type of card organisms.

Anyway, would love to get some other people's thoughts here! Thanks!

[mindytom]

A consistent default padding sounds like a great idea.

To clarify @kylegilbreath, you're suggesting to have 20px padding between any of the combinations of headings, paragraphs, cards, and buttons?

[kylegilbreath]

I'm suggesting we stick with a default padding container for the card (the current default is 20px but I'm fine with any padding value here, more just want a consistent value), regardless of what might be contained within it. Unless there is a specific reason, or card type (i.e. maybe a centered promo-type of card for empty pages). I'm advocating for adding guidance around this so maintain a consistent feel throughout the product.

[JT1989]

we've (PN eng + design) been starting to experiment with the 2-column grid with the gutter as a guide. Example:

Used this grid: https://share.goabstract.com/2d429ee0-fc03-41aa-9a9b-260d25c21023?sha=77e48f6ae28910495d0dc3209d854923ac6ea637

[serifluous]

Thanks for this discussion, everyone! Having more consistent default spacing across the components is something we know could be better. We'll be working on it soon 🤞

For cards specifically, are you all seeing patterns when people are using non-default padding? Does it tend to show up for a particular kind of use case?

Can you tag more folks in this thread who are using the non-default padding? Even if you can get them to just drop an Abstract link here when you come across it in crit, that'd be really helpful! We want to get as many people to chime in here, so we can nail down guidelines without being overly restrictive.