Layouting of components involves setting proper constraints for each component, and how these components can be grouped properly to ensure responsivity.
Overview
It is essential to understand how the layouts of multiple components can be handled. To understand this, we will be building a simple landing page with a heading, a subheading and an image.
Example: Building a simple landing page
Here's how you can build a simple landing page and make it responsive.
Creating Text Content
- Drag and drop a text component and set the variant to
Title 1. This will be the heading of the landing page. - Create another text component and set the variant to
Body 3. This will be the subheading of the landing page. - Group the components together.
Grouping text with Image
- Select the text content group and the image, and group them together.
- Change the orientation of the group to horizontal.
- For the text component group and the image, make the
Flexwidth 1 so that both components can take up equal space in the group. - For the text component, set a minimum width constraint of
300so that for smaller screens, the text can take up the whole space of the screen.
Finalising the landing page
- Add the necessary configuration to the group like BG color, padding, gap, etc.
- View the page on different screens and make necessary adjustments to the constraints.
Your landing page is ready.
Best Practices
- 100% Width - Setting the width of the child component to
100%makes it cover the entire space of the parent component. This makes it really easy to group components and make them responsive.
For example, while grouping the heading and subheading, set the individual text widths to 100% to make sure they take up the entire space of the group.