The Container component is a basic block element that provides consistent padding and width management across different screen sizes.
Usage
The Container component is based on the Tailwind CSS
.container class and comes with built-in configurations for width, max-width, margin, and padding. You can modify these properties to adjust the layout as needed.Adding a Container
To add a Container component:
- Open the Insert Menu and navigate to Components.
- Click or drag the Container onto your desired location on the page.
- Drag the desired component inside the Container.
Guides
Custom Padding
The default padding 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 Padding to add or remove padding around the content. You can also choose specific values for left, right, top, and bottom padding.
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.
You can also create custom breakpoints by overriding the Tailwind CSS container class.
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. |