Content Separator

<pa-content-separator> | PaContentSeparator

A visual separator component used to divide content sections with an optional horizontal line and label. Perfect for creating clear visual boundaries between different content areas in forms, pages, or layouts.

Usage

Content separators help organize content by providing visual breaks between sections. Use them to separate form sections, content blocks, or different areas of your application interface.

Personal Information

<template>
  <pa-content-separator label="Personal Information" />
</template>

Examples

Basic Separator

A simple horizontal line separator without any label.

<template>
  <pa-content-separator />
</template>

Labeled Separator

Add a label to provide context for the content sections being separated.

Account Settings

<template>
  <pa-content-separator label="Account Settings" />
</template>

Label Only (No Lines)

Display just the label without horizontal lines using the show-lines prop.

Contact Details

<template>
  <pa-content-separator label="Contact Details" :show-lines="false" />
</template>

Importing

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

Properties

Name	Description	Reflects	Type	Default
label	Optional text label to display in the separator.	no	string	null
showLines	Whether to display horizontal lines on either side of the label.	no	boolean	true

Events

This component does not emit any custom events.

Dependencies

This component has no external dependencies.