The Halstack's container component provides a structured way to manage layout and spacing within the Halstack Design System. It allows for controlled use of design tokens such as spacing, borders, and shadows, ensuring consistency across the UI.
Being generic in nature, it can be overused, so it's important to consider situations where more specific and expressive components could be used.
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 essential links to help you understand and use the container component correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
- 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.
- Customize border styles of the container to match the rest of your interface design.
- Don't use the container to build components without first ensuring that there isn't a more specific, semantic Halstack component that could be used instead.
- Whenever possible, try to use the design tokens provided by the Halstack Design System, even though the component allows any value.