Layouting Components

Example: Building a simple landing page

Layouting of components involves setting proper constraints for each component, and how these components can be grouped properly to ensure responsivity.


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 Flex width 1 so that both components can take up equal space in the group.
  • For the text component, set a minimum width constraint of 300 so 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.

Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →