Skip to main content
Version: 3.0.0

Layout configuration

Layout settings will be available for all components that can group other types of elements (for example, Container or Card).

These settings allow users to customize properties as the layout direction, alignment, gap, sizing, and spacing.

Layout configuration

These settings can be applied practically in various ways, depending on the context and purpose of the design. For example:

  • In a website or app design, the layout direction and alignment settings can be used to ensure that the content is displayed in a logical and visually appealing way. For instance, a left-to-right layout direction may be more appropriate for languages that read from left to right, while a center alignment may be better for headings or titles.
  • The gap, sizing, and spacing settings can be used to control the distance between elements in a design. This can help create a sense of hierarchy and balance, as well as improve readability and usability. For example, increasing the spacing between paragraphs or sections can make the content easier to scan and read, while reducing the size of certain elements can help prioritize others.
  • Customizing these properties can also help ensure that a design is accessible and inclusive. For instance, adjusting the layout direction and alignment settings can make the design more readable for users with certain disabilities or who use assistive technologies. Similarly, increasing the spacing and sizing of interactive elements can make them easier to click or tap for users with motor impairments.

To better understand how these layout configurations work and see real-time feedback on different combinations, please refer to the following link:

ยปLayout configuration

Was this page helpful?