Add gap options for the `Card` component

[ascartabelli]

Summary

The Card component adds a bottom margin of .5em to its header.

Depending on where the card is used we may want different gaps.

Possible solution design or implementation

Add a gap property which can have fixed values (e.g. "small" | "normal" | "double") and style it to use the already defined gaps in CSS variables.

Additional context

We may want to update the login page when we tackle this, as its gaps are way smaller than the design on Figma.

[laremas]

What should i do? i think @ascartabelli already answered.

Maybe this can be helpful?

[nortonandreev]

Spoke with @laremas, will go with the following options for the time-being:

small: 8px default: 10px medium: 20px large: 30px;

We can revisit this once the updated design system is in place.