Container

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