Read-only data display components for showing label-value pairs without form inputs. Useful for profile pages, detail views, order summaries, and anywhere you need to present structured data.
Multiple pa-fields Blocks
Consecutive pa-fields blocks get automatic spacing via .pa-fields + .pa-fields.
Multi-Column Grid
Uses pa-fields--cols-2/3/4. Use pa-field--full to span all columns.
Field Groups
Labeled sections using pa-field-group with pa-field-group__title.
Horizontal
Uses pa-fields--horizontal.
Table-Style Bordered
Uses pa-fields--table pa-fields--bordered.
Striped
Uses pa-fields--striped.
Compact
pa-fields--compact
Inline
pa-fields--inline
Row
pa-fields--row
Relaxed
pa-fields--relaxed
Filled Fields
Subtle background to distinguish data blocks. Uses pa-fields--filled.
Form vs Display
Edit
View
Color Variants
Theme colors for border and filled background. Uses pa-fields--color-{1-9}. Combine with pa-fields--filled for tinted backgrounds. Use pa-fields--no-border to remove the border.
Border Colors
Filled + Color (Tinted Background)
No Border
Copyable Fields
Three styles for copy-to-clipboard functionality. Click to test each variant.
Copy Button (always visible)
Uses pa-field--copy-btn
sk_live_abc123xyz789
Click Value to Copy
Uses pa-field--copy-click
Icon on Hover Only
Uses pa-field--copy-hover
Real-World: Invoice Layout
Customer (full width) + Receipt/Delivery addresses (50/50). Combines pa-field-group with pa-row/pa-col-*.
| Product | SKU | Qty | Price | Total |
|---|---|---|---|---|
| Mechanical Keyboard | KB-MX-BRN | 2 | $149 | $298 |
| 27" 4K Monitor | MON-27-4K | 4 | $449 | $1,796 |
User Profile
Active
CSS Classes Reference
Field Elements
pa-field- Label-value pairpa-field__label- Label elementpa-field__value- Value elementpa-field--full- Span all grid columns
Container & Groups
pa-fields- Field containerpa-field-group- Section wrapperpa-field-group__title- Section title
Grid Columns
pa-fields--cols-2- 2 columnspa-fields--cols-3- 3 columnspa-fields--cols-4- 4 columns
Layout Modifiers
pa-fields--horizontal- Label left, value rightpa-fields--table- Table-like widthspa-fields--bordered- Row separatorspa-fields--striped- Alternating bgpa-fields--compact- Tighter spacingpa-fields--relaxed- Larger spacingpa-fields--inline- Inline flowpa-fields--row- Equal-width columnspa-fields--filled- Background panelpa-fields--color-{1-9}- Border colorpa-fields--no-border- Remove border
Combining
--table --bordered--horizontal --compact--filled --cols-2--filled --color-1(tinted bg)
Detail Panel Integration
Headerless detail panel with floating close button. Click a row to view order data using pa-fields components.
| Order | Customer | Date | Status | Total |
|---|---|---|---|---|
| #ORD-001 | Elena Petrova | 28 Jan 2026 | Delivered | $1,249.00 |
| #ORD-002 | Jan Novak | 27 Jan 2026 | Pending | $2,847.50 |
| #ORD-003 | Martin Svoboda | 26 Jan 2026 | Processing | $589.00 |
| #ORD-004 | Petra Konecna | 25 Jan 2026 | Cancelled | $3,120.00 |
Click a table row to view order details here.
Full-Screen Overlay Panel
Click a row to open a full-screen overlay panel (slides in from right, like profile panel).
| SKU | Product | Category | Price | Stock |
|---|---|---|---|---|
| KB-MX-001 | Mechanical Keyboard Pro | Peripherals | $149.00 | 234 |
| MON-4K-27 | 27" 4K IPS Monitor | Displays | $449.00 | 89 |
| DSK-STD-01 | Standing Desk Frame | Furniture | $599.00 | 42 |
| CHR-ERG-X1 | Ergonomic Office Chair | Furniture | $389.00 | 156 |