The Container component is a basic block element that provides consistent margin and width management across different screen sizes.
It comes with built-in configurations for width, max-width, and margin. You can modify these properties to adjust the layout as needed.
Adding a Container
You can add a Container component by inserting it from the Library.
Guides
Add gutter class to component
Custom Margin
The default margin is set to
2rem on the left and right sides of the container, but you can change this value:- Select the Container component.
- In the properties panel, adjust the margin to add or remove the margin around the content. You can also choose specific values for left, right, top, and bottom margins.
Adjusting the Width
You can modify the width of the container:
- Select the Container component.
- In the properties panel, under Width, you can set custom values. You can use percentage values (e.g.,
80%) or fixed values (e.g.,500px) depending on the requirements of your layout.
Customizing the Max Width
If you prefer to change the max-width of the container on specific breakpoints, you can customize the max-width using the properties panel:
- Select the Container component.
- In the properties panel, navigate to the Max Width property to adjust the values for each screen size breakpoint.
Properties
Property | Type | Default | Description |
tag | 'a' | 'aside' | 'div' | 'footer' | 'header' | 'label' | 'main' | 'menu' | 'nav' | 'section' | 'span' | 'summary | 'textarea' | 'title’ | 'div' | Specifies the HTML tag used. |