layouts
Container
Multi-size wrapper with paddings
Features
- Auto centering
- Predefined sizes
- Auto adjust paddings
- Fluid by default
Overview
A Container
is the most basic layout element in a UI. There are two types of layout widths which determine how containers behave: fixed or fluid.
The fluid layout container is a full
width container, that does not have a max width (meaning it’s 100% wide all the time). Elements can stretch across the screen to fill all available space.
The fixed
container (meaning its max-width changes at each breakpoint) applies the ideal width to pages based on the elements being displayed, allowing them to be experienced at an appropriate dimension.
Anatomy
import { Container } from "@wonderflow/react-components";
export default () => {
return (
<>
<Container >...</Container>
<Container padding={false}>...</Container>
</>)
};
Design Guidelines
Use the grid system when designing any layout within your product. Don’t align components. Not all UI elements within your layout need to align with the column. As long as the parent element aligns to the assigned number of columns. Don’t modify the grid templates. Use the min-width media queries to jump from one breakpoint to another. Sometimes its okay to break the grid to allow elements to stand out.
- Use to create consistent layouts across your product.
- Use create visual hierarchy and rhythm in your layouts.
- Use to assist you in making decisions while designing layouts with high or low densities.
API Reference
dimension
enum
full
padding
boolean
true
as
enum
div