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.
Múltiples bloques pa-fields
Consecutive pa-fields blocks get automatic spacing via .pa-fields + .pa-fields.
Cuadrícula de varias columnas
Uses pa-fields--cols-2/3/4. Use pa-field--full to span all columns.
Grupos de campos
Labeled sections using pa-field-group with pa-field-group__title.
Personal
Empleo
Contacto de emergencia
Horizontal
Uses pa-fields--horizontal.
Estilo de tabla con bordes
Uses pa-fields--table pa-fields--bordered.
Rayado
Uses pa-fields--striped.
Compacto
pa-fields--compact
En línea
pa-fields--inline
Fila
pa-fields--row
Relajado
pa-fields--relaxed
Campos rellenos
Subtle background to distinguish data blocks. Uses pa-fields--filled.
Formulario vs visualización
Editar
Ver
Variantes de color
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.
Colores de borde
Relleno + Color (fondo teñido)
Sin borde
Campos copiables
Three styles for copy-to-clipboard functionality. Click to test each variant.
Botón de copiar (siempre visible)
Uses pa-field--copy-btn
sk_live_abc123xyz789
Haz clic en el valor para copiar
Uses pa-field--copy-click
Icono solo al pasar el cursor
Uses pa-field--copy-hover
Real: diseño de factura
Customer (full width) + Receipt/Delivery addresses (50/50). Combines pa-field-group with pc-row/pc-col-*.
Cliente
Dirección del recibo
Dirección de entrega
Elementos
| Producto | SKU | Cant. | Precio | Total |
|---|---|---|---|---|
| Mechanical Keyboard | KB-MX-BRN | 2 | $149 | $298 |
| 27" 4K Monitor | MON-27-4K | 4 | $449 | $1,796 |
Perfil de usuario
Active
Contacto
Habilidades
Referencia de clases CSS
Elementos de campo
pa-field- Label-value pairpa-field__label- Label elementpa-field__value- Value elementpa-field--full- Span all grid columns
Contenedor y grupos
pa-fields- Field containerpa-field-group- Section wrapperpa-field-group__title- Section title
Columnas de cuadrícula
pa-fields--cols-2- 2 columnspa-fields--cols-3- 3 columnspa-fields--cols-4- 4 columns
Modificadores de diseño
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
Combinación
--table --bordered--horizontal --compact--filled --cols-2--filled --color-1(tinted bg)