Skip to content

Layout Components

Pending Review

Pending Review from User Experience (UX)

Layout components provide the structural foundation for building responsive, organized, and visually consistent user interfaces within the PWC Design System.

Component Categories

Structural Components

Foundation elements for organizing content with flexible layouts and responsive behavior.

Container Components

Specialized containers for grouping related content with consistent styling and interaction patterns.

Interactive Layout Elements

Dynamic layout components that respond to user interactions and provide enhanced content organization.

Communication Interfaces

Layout components designed for messaging, conversation, and real-time communication experiences.

Available Components

Communication & Interaction

  • Chat - Messaging interface component for real-time conversation experiences with threading and user management
  • Chat Window - Container component for chat interfaces with message management and input integration
  • Dialog - Modal overlay component for focused interactions with backdrop handling and accessibility support

Content Organization

  • Divider - Visual separator element for creating clear boundaries between content sections and visual hierarchy
  • Expand Container - Container component with expand/collapse functionality for progressive content disclosure

  • Expander - Interactive element for triggering expand/collapse actions with visual indicators and keyboard navigation

  • Tabs - Tabbed interface component for organizing content into navigable panels with keyboard support

  • Task List - Organized list component for displaying tasks, todos, and actionable items with interactive states

Layout Structure

  • Flex - Flexible layout component implementing CSS Flexbox with responsive capabilities and alignment control
  • Mode Viewer - Component for displaying content in different viewing modes and states with responsive behavior
  • Root - Foundation component providing theme context, global layout management, and application structure

Key Features

  • Responsive Design - All layout components adapt seamlessly across device sizes with mobile-first approaches
  • Semantic Structure - Proper HTML semantics and ARIA attributes for accessible content organization
  • Performance Optimization - Efficient rendering patterns and optimized CSS for smooth interactions
  • Visual Consistency - Consistent spacing, alignment, and hierarchy across all layout components
  • Flexible Architecture - Modular components that work together to create complex layout systems

Design Principles

  • Structure - Clear information architecture with logical content hierarchy and organization patterns
  • Adaptability - Responsive behavior that maintains usability across all device sizes and orientations
  • Accessibility - Universal design principles ensuring inclusive experiences for all users and assistive technologies
  • Performance - Optimized rendering and efficient CSS to maintain smooth interactions and fast load times
  • Consistency - Unified spacing, alignment, and visual patterns following PWC Design System standards

For detailed implementation guidance, explore individual component documentation or visit our Storybook documentation for interactive examples and API specifications.