Text Container

<pa-text-container> | PaTextContainer

A specialized container component designed for text content, providing optimal spacing and layout for typography-focused content like articles, documentation, and text-heavy interfaces.

<pa-text-container size="grouped">
  <h2>Article Title</h2>
  <p>Article content with proper text spacing...</p>
</pa-text-container>

DEVS

Do the sizes work?

Examples

Basic Usage

Article Title

This text container provides optimal spacing for readable content.

Multiple paragraphs maintain proper vertical rhythm and typography flow.

<template>
  <pa-text-container size="grouped">
    <h3>Article Title</h3>
    <p>This text container provides optimal spacing for readable content.</p>
    <p>Multiple paragraphs maintain proper vertical rhythm and typography flow.</p>
  </pa-text-container>
</template>

Size Variants

Condensed: Minimal spacing for compact layouts

Perfect for dense information or quick reference content

Grouped: Standard spacing for related content

Ideal for articles and connected text sections

Ungrouped: Generous spacing for distinct sections

Best for independent content blocks

<template>
  <pa-text-container size="condensed-group">
    <div>
      <strong>Condensed:</strong> Minimal spacing for compact layouts
      <div>Perfect for dense information or quick reference content</div>
    </div>
  </pa-text-container>
  
  <pa-text-container size="grouped">
    <div>
      <strong>Grouped:</strong> Standard spacing for related content
      <div>Ideal for articles and connected text sections</div>
    </div>
  </pa-text-container>
  
  <pa-text-container size="ungrouped">
    <div>
      <strong>Ungrouped:</strong> Generous spacing for distinct sections
      <div>Best for independent content blocks</div>
    </div>
  </pa-text-container>
</template>

Importing

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

Properties

Name	Description	Reflects	Type	Default
size	Controls the spacing between text elements for optimal typography.	no	'condensed-group' | 'grouped' | 'ungrouped'	'grouped'

Slots

Name	Description
default	The text content to be contained and properly spaced.

Events

This component does not emit any events.

Dependencies

None

Related Components

Text Dividers

For additional spacing control within text content, use PaTextDivider to create custom spacing between text sections:

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