Text Divider

<pa-text-divider> | PaTextDivider

A spacing component designed to create structured spacing between text content within pa-text-container. Text dividers help improve content readability by providing appropriate spacing without adding visual lines.

Usage

First paragraph of content.

 

Second paragraph with spacing above.

<template>
  <pa-text-container size="grouped">
    <p>First paragraph of content.</p>
    <pa-text-divider size="md" />
    <p>Second paragraph with spacing above.</p>
  </pa-text-container>
</template>

Examples

Size Variants

Content before small divider

 

After small (6px)

 

After medium (8px)

 

After large (12px)

<template>
  <pa-text-container size="grouped">
    <div>Content before small divider</div>
    <pa-text-divider size="sm" />
    <div>After small (6px)</div>
    <pa-text-divider size="md" />
    <div>After medium (8px)</div>
    <pa-text-divider size="lg" />
    <div>After large (12px)</div>
  </pa-text-container>
</template>

Article Layout

Article Title

Introduction paragraph that sets up the main topic and provides context for the reader.

<pa-text-divider size="lg" />

<h2>Main Section</h2>
<p>Detailed content about the main topic with comprehensive information.</p>

<pa-text-divider size="md" />

<h3>Subsection</h3>
<p>More specific information within the main section.</p>

<pa-text-divider size="sm" />

<p>Additional details that relate closely to the subsection above.</p>

<template>
  <pa-text-container size="grouped">
    <h1>Article Title</h1>
    <p>Introduction paragraph that sets up the main topic and provides context for the reader.</p>
    
    <pa-text-divider size="lg" />
    
    <h2>Main Section</h2>
    <p>Detailed content about the main topic with comprehensive information.</p>
    
    <pa-text-divider size="md" />
    
    <h3>Subsection</h3>
    <p>More specific information within the main section.</p>
    
    <pa-text-divider size="sm" />
    
    <p>Additional details that relate closely to the subsection above.</p>
  </pa-text-container>
</template>

Documentation Layout

Component Overview

This component provides functionality for managing user interactions and data processing.

<pa-text-divider size="md" />

<h3>Key Features</h3>
<ul>
  <li>Real-time data validation</li>
  <li>Responsive design support</li>
  <li>Accessibility compliance</li>
</ul>

<pa-text-divider size="sm" />

<p>Each feature is designed to work seamlessly with other PayAdvantage components.</p>

<template>
  <pa-text-container size="grouped">
    <h2>Component Overview</h2>
    <p>This component provides functionality for managing user interactions and data processing.</p>
    
    <pa-text-divider size="md" />
    
    <h3>Key Features</h3>
    <ul>
      <li>Real-time data validation</li>
      <li>Responsive design support</li>
      <li>Accessibility compliance</li>
    </ul>
    
    <pa-text-divider size="sm" />
    
    <p>Each feature is designed to work seamlessly with other PayAdvantage components.</p>
  </pa-text-container>
</template>

Importing

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

Properties

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

Size Reference

Size	Spacing	Use Case
sm	6px	Subtle spacing between closely related text elements
md	8px	Standard spacing for paragraph breaks
lg	12px	Prominent spacing between distinct content sections

Dependencies

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

Related Components

• PaDivider - Visual line divider for general content
• PaTextContainer - Container component for text content