Describe spacing between components

[inesdgomes]

Currently in the ILO website:

• Headlines / Margin-bottom: 55px
• Components / Padding-bottom: 64px

Should it be?

• Headlines / Margin-bottom: 64px (this is not applied everywhere in the designs - what are the exceptions?)
• Components / Padding-bottom: 112px (it seems this is not applied everywhere in the designs - what are the exceptions?)

Possible exceptions:

• Headlines / Margin-bottom for a) accordion, b) content tabs; c) links list; d) profile; e) Social media: 24px? They have different spacing in the designs

We need to ensure whatever spacing is defined here kind of matches what we define for headings in the rich text. See https://github.com/international-labour-organization/designsystem/issues/1059

[beatrizmartinmartins]

@inesdgomes Hey! So this depends a lot on the template. Sometimes the accordion for example, they way it is displayed, needs one top or bottom spacing or another. This doesn't really depends on the components, but rather on the template. We can include a few spacings, like the SectionDivider one but I don't feel like we can do that on a lot of places honestly.

For example on this screenshot, the SectionDivider can have a top spacing and bottom spacing that is different because it's a divider, but for example if we have a top and bottom spacing on the button of 16px for example, then we would need to make adjustments on every single page for this to work.

If you'd like we can talk about it during our meeting