Reduce padding to center content

[kevindherman]

Builds

• staging
• prod

Issue

Source
mini beta

[curtismchale]

@kevindherman their example is a bit bad. The heading there does have extra margin on top which we can remove but we also run some JavaScript here to equalize the card heights. The screenshot below shows cards with different heights due to content in the card. We really just trade padding to the bottom on that first one because a few of the cards have a 3 line title.

[kevindherman]

@curtismchale your explanation makes sense for when there are various lengths. It seems like the top heading should be fixed and the footer is what may have more padding based on the set.

Adjustment:

• Reduce top heading to 0
• Bottom padding to 0 of the card with the most text

If the top heading is reduced to zero AND the text is all the same character total (and short) like their example, the bottom margin should be 0 for all of them making the set tighter.

Does that make sense and do you think it addresses both scenarios with more consistency?

[curtismchale]

@kevindherman There was never a variable margin or padding on the card. The JavaScript forces the height of the cards based on the one with the most content.

I can reduce the heading margin to 0 and it will look like above.

Reducing the bottom padding to 0 will mean that the text has no spacing between it and the bottom border.

I think our best option is what I have in a screenshot above, heading margin-top:0;

Then when you have variable content length you'll just have to deal with it looking as it does in the screenshot.

[kevindherman]

@curtismchale that makes sense. The variable content length still have a character max so it keeps things within reason.

Lets move forward with your idea and test it out.

[curtismchale]

@kevindherman this is deployed everywhere.

[kevindherman]

@curtismchale thank you. I'll click around but so far, it looks good.