Create section's variants and apply them to templates

[inesdgomes]

Define variants for the section component that have different spacing above, below and within. Check if it works in 2/3 different templates with different components.

[beatrizmartinmartins]

@inesdgomes you can check the new component with the specifications above detailed on this link

Also, I made the changes on these templates:

• Homepage
• Portal With Nav

I think it works on them. What do you think? Maybe we need some sections without left and right paddings though

[inesdgomes]

• Add left and right padding
• Apply new component to Publication template

[beatrizmartinmartins]

@inesdgomes

• Left and right padding sections added.
• Publication template update to this. I still think we have a problem with the headings spacing with the content right? What do you think?

[inesdgomes]

Hi @beatrizmartinmartins Thanks, I finally reviewed this, really sorry for the delay. Here are some comments/questions:

• I left a question about the designs that don't have labels and therefore are not clear about their purpose: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf?node-id=7294-15320#1058305358
• Yes, I think we still have an issue with the headings spacing. I believe we need a variation of the section component where the spacing after the heading matches the specs in the Typography spacing, i.e. the space after a heading is 24px rather than 64px. In fact, it seems to me that the 64px space is only needed when the component that shows after the heading is a card group. All the other components require the 24px space.
• In the section component, any chance we could add a bit more narrative on how it should be used? I'm not sure it's clear, for example, that we can have more than one component in the same section, is it? What about the left and right padding, shouldn't we have some notes about that?

[beatrizmartinmartins]

Hey @inesdgomes , let's make a new proposal:

Let's follow the typography spacing guidelines that we carefully set up a while ago and introduce that everywhere. I'd say let's not have a spacing for cards and another one for the rest, let's just make everything after a heading be 24px. I created the component for Section following these last guidelines. I think this is the best option to keep everything consistent and easier to scale. If we don't agree with this option, we can always separate the section in two variants: 24px and cards variant or something like that, but I honestly feel like this can lead to much more questions in the future rather than an improvement on the component and DS.

Also, I will create some guidelines around it on when, where and how to use it so we can have a much deeper understanding of how this component behaves.

Let me know what you think about this option.

[beatrizmartinmartins]

@inesdgomes Made the changes on the component and also on the templates

[inesdgomes]

Hi @beatrizmartinmartins Ok, that would make more sense and it would definitely be easier to implement indeed. I must say I find the space between headings and cards a bit too tight now, but I guess that's only because I'm very used to the spacing we had before. I think we can proceed with what you proposed.

[inesdgomes]

To be validated by Justin