Container - Front-end Project

Overview

The Container component provides consistent content width, padding, and centering across your application. It’s the foundation for page layouts and helps maintain readable line lengths.

Basic Usage

import { Container } from '@yourproject/components';

function Example() {
  return (
    <Container>
      <h1>Page Title</h1>
      <p>Content goes here with consistent padding and max-width.</p>
    </Container>
  );
}

Sizes

Containers come in multiple sizes to accommodate different content needs:

Small
Medium
Large
XL
Full

<Container size="sm">
  Narrow container, ideal for focused content like articles (max-width: 640px)
</Container>

<Container size="md">
  Standard container for most pages (max-width: 768px)
</Container>

<Container size="lg">
  Wide container for dashboards (max-width: 1024px)
</Container>

<Container size="xl">
  Extra wide container (max-width: 1280px)
</Container>

<Container size="full">
  Full width, no max-width constraint
</Container>

The default size is lg if not specified.

Padding

Control the horizontal padding of the container:

<Container padding="none">
  No padding
</Container>

<Container padding="sm">
  Small padding
</Container>

<Container padding="md">
  Medium padding (default)
</Container>

<Container padding="lg">
  Large padding
</Container>

Centering

By default, containers are centered. You can disable this:

<Container centered={false}>
  This container is not centered (aligned to left)
</Container>

Fluid Container

Create a container that maintains padding but has no max-width:

<Container fluid>
  Full width container with padding
</Container>

Props

string

default:"lg"

Container max-width: sm (640px), md (768px), lg (1024px), xl (1280px), or full

string

default:"md"

Horizontal padding: none, sm, md, or lg

boolean

default:"true"

Whether to center the container horizontally

boolean

default:"false"

If true, removes max-width while keeping padding

ReactNode

required

The content to display inside the container

string

Additional CSS class names to apply

string

default:"'div'"

HTML element to render: div, main, section, article, etc.

TypeScript Interface

interface ContainerProps {
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  centered?: boolean;
  fluid?: boolean;
  children: React.ReactNode;
  className?: string;
  as?: keyof JSX.IntrinsicElements;
}

Layout Examples

Basic Page Layout

import { Container } from '@yourproject/components';

function Page() {
  return (
    <Container as="main">
      <h1>Welcome</h1>
      <p>This is a standard page with centered content.</p>
    </Container>
  );
}

Article Layout

import { Container } from '@yourproject/components';

function Article() {
  return (
    <Container size="sm" as="article">
      <h1>Article Title</h1>
      <p>The narrow container width improves readability for long-form content.</p>
      <p>Optimal line length is around 60-70 characters per line.</p>
    </Container>
  );
}

Dashboard Layout

import { Container, Grid, Card } from '@yourproject/components';

function Dashboard() {
  return (
    <Container size="xl">
      <h1>Dashboard</h1>
      <Grid cols={3} gap="lg">
        <Card>Widget 1</Card>
        <Card>Widget 2</Card>
        <Card>Widget 3</Card>
      </Grid>
    </Container>
  );
}

Nested Containers

import { Container } from '@yourproject/components';

function Page() {
  return (
    <>
      {/* Full-width hero section */}
      <div style={{ background: '#f5f5f5' }}>
        <Container size="xl">
          <h1>Hero Section</h1>
        </Container>
      </div>
      
      {/* Standard content */}
      <Container size="md">
        <p>Main content with comfortable reading width.</p>
      </Container>
      
      {/* Wide content section */}
      <Container size="xl">
        <Grid cols={3}>
          <Card>Feature 1</Card>
          <Card>Feature 2</Card>
          <Card>Feature 3</Card>
        </Grid>
      </Container>
    </>
  );
}

Full Width Section with Padded Content

import { Container } from '@yourproject/components';

function Page() {
  return (
    <div style={{ background: '#f0f0f0' }}>
      <Container fluid padding="lg">
        {/* Full width but with consistent padding */}
        <img 
          src="banner.jpg" 
          alt="Banner" 
          style={{ width: '100%' }} 
        />
      </Container>
    </div>
  );
}

Responsive Behavior

Containers automatically adjust their padding on smaller screens:

Desktop: Full padding as specified
Tablet: Slightly reduced padding
Mobile: Minimal padding to maximize screen space

<Container size="lg">
  {/* 
    Automatically adapts:
    - Desktop: max-width 1024px with large padding
    - Tablet: max-width 768px with medium padding  
    - Mobile: full width with small padding
  */}
</Container>

Use smaller container sizes (sm or md) for content-focused pages like blog posts and documentation to improve readability.

Use larger container sizes (xl or full) for application interfaces and dashboards that need more horizontal space.

Best Practices

Choose the right size: Use sm for articles, md for standard pages, lg for applications, and xl for dashboards
Consistent usage: Use the same container size throughout similar pages for visual consistency

Nested sections: Wrap full-width colored sections around containers for visual variety:

<section style={{ background: '#f5f5f5' }}>
  <Container>
    Content here
  </Container>
</section>

Semantic HTML: Use the as prop to render semantic elements (main, article, section) for better accessibility

Accessibility

Uses semantic HTML elements when specified with as prop
Maintains proper document structure
Ensures content remains accessible and readable at all viewport sizes
Provides consistent spacing for better visual hierarchy

​Overview

​Basic Usage

​Sizes

​Padding

​Centering

​Fluid Container

​Props

​TypeScript Interface

​Layout Examples

​Basic Page Layout

​Article Layout

​Dashboard Layout

​Nested Containers

​Full Width Section with Padded Content

​Responsive Behavior

​Best Practices

​Accessibility

Overview

Basic Usage

Sizes

Padding

Centering

Fluid Container

Props

TypeScript Interface

Layout Examples

Basic Page Layout

Article Layout

Dashboard Layout

Nested Containers

Full Width Section with Padded Content

Responsive Behavior

Best Practices

Accessibility