Twilio Segment layout grid and container

[marektonik]

Hello there! We've noticed that there's a saved grid style in the Paste components featuring two options: a 24px gutter or a 16px gutter, both with 12 columns.

Let's start with the first case.
Left nav + content — in this case, we primarily need to compose elements in the space to the right side of the navigation. To address this, we've prepared the following grid including left & right margins (36px) and excluding left navigation. Take a look and let us know if you think it's correct:

__________________________

Wizard — in this case, we'll need to include left and right margins of 36px to ensure proper spacing. Additionally, we would like to explore the possibility of having two types of containers in the wizards. The reason behind this is that sometimes the content in the wizards can be quite extensive, requiring a lot of horizontal space, while at other times, we are dealing with simple and small forms that don't take up much real estate.

Therefore, we propose implementing the following set of containers for the wizards:

• regular 8 columns - providing a balanced layout for typical content.
• wide 10 columns - allowing more room for expansive content that demands additional space horizontally.

By incorporating these two types of containers, we can create more flexible and adaptive wizards to cater to various content scenarios. We welcome your thoughts on this approach and whether it aligns with the project's requirements. Please let us know if you have any further suggestions or considerations. Thank you!

[loreina]

Hi @marektonik,

The Grid styles in Figma were made as pre-configured options to match the Grid component in code and there are more examples of layout configurations with the component on our docs site. We also have spacing and layout guidelines and recommend following an 8-pixel grid for spacing.

For product-specific layout guidance, especially the content area, I'd recommend syncing with @ceyerkes and @kevinbtu as Paste doesn't have specific content area spacing guidelines yet.