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--8. 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--8- Border colorpa-fields--no-border- Remove border
Combining
--table --bordered--horizontal --compact--filled --cols-2--filled --color-1(tinted bg)