Page Container

<pa-page-container> | PaPageContainer

A layout container component that provides consistent page-level spacing and responsive design for main content areas and page layouts.

<pa-page-container size="md">
  <h1>Page Title</h1>
  <p>Page content goes here...</p>
</pa-page-container>

DEVS

Do the sizes work?

Examples

Basic Usage

Page Content

This page container provides consistent spacing and layout structure.

<template>
  <pa-page-container size="md">
    <h3>Page Content</h3>
    <p>This page container provides consistent spacing and layout structure.</p>
    <pa-button variant="primary">Action Button</pa-button>
  </pa-page-container>
</template>

Size Variants

Small: Compact spacing for tight layouts

Nested content with minimal spacing

Medium: Standard spacing for general content

Nested content with balanced spacing

Large: Generous spacing for feature content

Nested content with spacious layout

<template>
  <pa-page-container size="sm">
    <div>
      <strong>Small:</strong> Compact spacing for tight layouts
      <div>Nested content with minimal spacing</div>
    </div>
  </pa-page-container>
  
  <pa-page-container size="md">
    <div>
      <strong>Medium:</strong> Standard spacing for general content
      <div>Nested content with balanced spacing</div>
    </div>
  </pa-page-container>
  
  <pa-page-container size="lg">
    <div>
      <strong>Large:</strong> Generous spacing for feature content
      <div>Nested content with spacious layout</div>
    </div>
  </pa-page-container>
</template>

Importing

import { PaPageContainer } from '@payadvantage/ui-components'

Properties

Name	Description	Reflects	Type	Default
size	Controls the spacing and layout scale of the page container.	no	'sm' | 'md' | 'lg'	none (required)

Slots

Name	Description
default	The main page content to be contained and spaced.

Events

This component does not emit any events.

Dependencies

None

Related Components

Page Dividers

For additional spacing control within page layouts, use PaPageDivider to create custom spacing between page sections:

<template>
  <pa-page-container size="md">
    <pa-sheet>Section 1</pa-sheet>
    <pa-page-divider size="md" />
    <pa-sheet>Section 2</pa-sheet>
  </pa-page-container>
</template>