Page Divider

<pa-page-divider> | PaPageDivider

A spacing component designed to create structured spacing between major page sections within pa-page-container. Page dividers help organize page layout into distinct areas and improve overall page structure.

Usage

First Section

 

Second Section

<template>
  <pa-page-container size="md">
    <pa-sheet elevate="true">First Section</pa-sheet>
    <pa-page-divider size="md" />
    <pa-sheet elevate="true">Second Section</pa-sheet>
  </pa-page-container>
</template>

Examples

Size Variants

Content before small divider

 

After small (12px)

 

After medium (24px)

 

After large (36px)

<template>
  <pa-page-container size="md">
    <pa-sheet elevate="true">Content before small divider</pa-sheet>
    <pa-page-divider size="sm" />
    <pa-sheet elevate="true">After small (12px)</pa-sheet>
    <pa-page-divider size="md" />
    <pa-sheet elevate="true">After medium (24px)</pa-sheet>
    <pa-page-divider size="lg" />
    <pa-sheet elevate="true">After large (36px)</pa-sheet>
  </pa-page-container>
</template>

Dashboard Layout

Dashboard

Overview and key metrics

 

Recent Activity

Payment processed

---

New customer added

---

 

Quick Actions

<template>
  <pa-page-container size="lg">
    <pa-sheet>
      <h1>Dashboard</h1>
      <p>Overview and key metrics</p>
    </pa-sheet>
    
    <pa-page-divider size="lg" />
    
    <pa-sheet>
      <h2>Recent Activity</h2>
      <pa-list-item>Payment processed</pa-list-item>
      <pa-list-item>New customer added</pa-list-item>
    </pa-sheet>
    
    <pa-page-divider size="md" />
    
    <pa-sheet>
      <h2>Quick Actions</h2>
      <pa-button variant="primary">Process Payment</pa-button>
    </pa-sheet>
  </pa-page-container>
</template>

Importing

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

Properties

Property	Type	Default	Description
size	'sm' | 'md' | 'lg'	Required	Controls spacing amount (12px/24px/36px)

Size Reference

Size	Spacing	Use Case
sm	12px	Subtle separation between related sections
md	24px	Standard separation for distinct page areas
lg	36px	Prominent separation between major page sections

Dependencies

• pa-page-container - Works optimally within page containers for proper spacing context

Related Components

• PaDivider - Visual line divider for general content
• PaPageContainer - Container component for pages