The Container component provides a flexible container to contain multiple content components. Its main use is to apply a background color or background image to multiple components placed within it. It can also be used to apply padding around multiple components.
Key information about this component:
Layout canvas elements
- Container - Provides the container.
Component form fields
- Background color - Sets the background color of the container.
- Background image - Sets a background image for the container.
- Border - Adds a 1px border to the container.
- Border color - Sets the border-color
- Padding top and bottom - Sets padding top and bottom around the content within the container. This can be applied to each breakpoint.
- Padding left and right - Sets padding left and right around the content within the container. This can be applied to each breakpoint.
- Height - Sets the container's height to Fit the content within it or Fill the space available. Fill the space available will make the container expand to fill the height available within the parent component. This option is useful for achieving horizontal alignment.
- Minimum height (by device) - Sets a minimum height for the container by device width.
- Vertical alignment - If the container's content is smaller than the height of the container, you can set the vertical position of the content to Top, Middle or Bottom. Note: The container's content must have its height set to Fit to content and not Fill space available for vertical alignment to take effect.
- Add space below - Add a space (margin) below the container. This is required if space is desirable when adding this component above another component within the same parent layout component.
Site Studio