Container
The container component represents the box model inside the Halstack Design System. Is a general-purpose container that allows for controlled use of our design tokens. Being generic in nature can be "over-used", so it's important to consider situations where more specific and expressive components could be used.
The primary function of a container is to structure and group other components or contents that are related to each other, allowing certain styles of customization to obtain more cohesive and consistent interfaces.
- Use a container to group and organize related content within a specific section of a page or layout.
- Set size, spacing, and margins that are consistent by applying the box model properties.
- Control the depth of the different elements of your UI by customizing the container's box shadow.
- Change and custom border styles of the container to match the rest of your interface design.
Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex layouts for your application.
Below, we share a series of links that we consider essential to understand and use the Container component correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review them: