Fresh approaches to data display. Each section is a completely different pattern.
1. Tabla de descripciones
Ant Design style. Label cells get a tinted background. Dense, structured, and very readable.
Empresa
Novak & Partners s.r.o.
N.º de reg.
CZ48207497
ID de VAT
CZ48207497
Contacto
Jan Novak
Correo electrónico
jan.novak@novakpartners.cz
Teléfono
+420 234 111 222
Notas
Preferred carrier for Central European routes. Framework agreement renewed annually.
1b. Tabla de descripciones (2 columnas)
Nombre
Elena
Apellido
Petrova
Fecha de nacimiento
14 March 1992
Rol
Senior Developer
Oficina
Prague, Karlin
Fecha de inicio
1 Sep 2019
1c. Tabla de descripciones — Fijo + Truncar
--fixed locks label columns to 14rem. --truncate clips long values with ellipsis.
Empresa
Novak & Partners International Consulting Group s.r.o.
N.º de reg.
CZ48207497
Dirección
Vinohradska 2468/164, Prague 3, Vinohrady, 130 00, Czech Republic
Correo electrónico
jan.novak@novakpartners-international.cz
1d. Tabla de descripciones — Ancho de etiqueta personalizado
--fixed with --label-width: 20rem via CSS custom property.
Nombre legal completo
Elena Petrova
Fecha de nacimiento
14 March 1992
Departamento
Engineering
Tipo de empleo
Full-time permanent
2. Guías de puntos
Restaurant menu / invoice style. Dotted line connects label to value.
N.º de contrato
CTR-2025-00194
Tipo
Framework Agreement
Estado
Active
Fecha de renovación
1 Jan 2027
Asientos
48 / 50
2b. Guías de puntos — Totales de factura
Perfect for financial summaries.
Subtotal
$2,094.00
Envío
$24.00
VAT 21%
$439.74
Total
$2,557.74
3. Tarjeta de propiedad
Grouped in bordered card with thin dividers. Clean, professional.
Detalles del pedido
ID de pedido
#ORD-2026-00847
Fecha
28 January 2026
Estado
Delivered
Pago
Visa *4242
Total
$1,249.00
3b. Tarjeta de propiedad — Apilada
Multiple property groups in sequence.
Cliente
Nombre
Elena Petrova
Correo electrónico
elena.petrova@example.com
Teléfono
+420 776 123 456
Envío
Dirección
Vinohradska 2468/164, Prague 3
Método
Express (2-day)
4. Lineal minimalista
Ultra-clean. Only weight + color contrast. No decoration.
Estado
Active
Prioridad
High
Asignado a
Elena Petrova
Creado
28 Jan 2026
Fecha de vencimiento
14 Feb 2026
Proyecto
Platform v2
Etiquetas
Frontend
UX
5. Chips en línea
Properties as flowing inline pairs. Value in a chip/pill.
Estado
Active
Rol
Senior Dev
Equipo
Platform
Oficina
Prague
Inicio
2019
Contrato
Renewal
7. Filas con bandas
Label gets a fixed-width tinted column. Clear visual anchor.
Servidor
prod-api-01
Dirección IP
10.0.12.45
OS
Ubuntu 22.04 LTS
Memoria
16 GB DDR5
Tiempo de actividad
47 days
7b. Con bandas — Estrecho
pa-banded--narrow — 10rem label band.
Servidor
prod-api-01
Dirección IP
10.0.12.45
OS
Ubuntu 22.04 LTS
Memoria
16 GB DDR5
7c. Con bandas — Predeterminado
No modifier — default 14rem label band.
Servidor
prod-api-01
Dirección IP
10.0.12.45
OS
Ubuntu 22.04 LTS
Memoria
16 GB DDR5
7d. Con bandas — Ancho
pa-banded--wide — 20rem label band.
Servidor
prod-api-01
Dirección IP
10.0.12.45
OS
Ubuntu 22.04 LTS
Memoria
16 GB DDR5
7e. Con bandas — Truncar
--truncate clips long values with ellipsis.
Servidor
prod-api-gateway-eu-west-01.internal.novakpartners.cz
Ruta
/var/lib/docker/containers/a1b2c3d4e5f6/config.v2.json
Hash
sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
Certificado
CN=*.novakpartners.cz, O=Novak & Partners, L=Prague, C=CZ
7f. Con bandas — Ancho con utilidad wr-*
Label width set per-label with wr-8 utility class (8rem).
Server
prod-api-gateway-eu-west-01.internal.novakpartners.cz
Path
/var/lib/docker/containers/a1b2c3d4e5f6/config.v2.json
Hash
sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
Cert
CN=*.novakpartners.cz, O=Novak & Partners, L=Prague, C=CZ
7g. Con bandas — Multilínea (superior por defecto)
Labels top-align by default when values wrap to multiple lines.
Servidor
prod-api-01
Descripción
Primary API gateway for Central European region. Handles authentication, rate limiting, and request routing to downstream microservices.
Etiquetas
production, eu-west, api-gateway, load-balanced, auto-scaling, monitored, pci-compliant
Notas
Scheduled for maintenance window on 2026-03-01 02:00 UTC. Failover to prod-api-02 will be active during this period. Contact SRE team before any manual restarts.
7h. Con bandas — Multilínea + --middle
pa-banded--middle vertically centers labels against wrapped values.
Servidor
prod-api-01
Descripción
Primary API gateway for Central European region. Handles authentication, rate limiting, and request routing to downstream microservices.
Etiquetas
production, eu-west, api-gateway, load-balanced, auto-scaling, monitored, pci-compliant
Notas
Scheduled for maintenance window on 2026-03-01 02:00 UTC. Failover to prod-api-02 will be active during this period. Contact SRE team before any manual restarts.
1e. Tabla desc. — Multilínea (superior por defecto)
Labels top-align by default in grid cells.
Empresa
Novak & Partners s.r.o.
Dirección
Vinohradska 2468/164, Prague 3, Vinohrady, 130 00, Czech Republic
Notas
Preferred carrier for Central European routes. Framework agreement renewed annually. Contact Jan Novak for any billing disputes or special rate negotiations.
Estado
Active
1f. Tabla desc. — Multilínea + --middle
Cells stretch to fill the row, content centered inside. Label backgrounds fill the full row height.
Empresa
Novak & Partners s.r.o.
Dirección
Vinohradska 2468/164, Prague 3, Vinohrady, 130 00, Czech Republic
Notas
Preferred carrier for Central European routes. Framework agreement renewed annually. Contact Jan Novak for any billing disputes or special rate negotiations.
Estado
Active
Con bandas — Etiqueta al inicio (predeterminado)
Servidor
prod-api-01
Dirección IP
10.0.12.45
Memoria
16 GB DDR5
Con bandas — --label-end
Servidor
prod-api-01
Dirección IP
10.0.12.45
Memoria
16 GB DDR5
Con bandas — --label-center
Servidor
prod-api-01
Dirección IP
10.0.12.45
Memoria
16 GB DDR5
Tabla de descripciones — Etiqueta al inicio (predeterminado)
Servidor
prod-api-01
Dirección IP
10.0.12.45
Memoria
16 GB DDR5
Tabla de descripciones — --label-end
Servidor
prod-api-01
Dirección IP
10.0.12.45
Memoria
16 GB DDR5
Tabla de descripciones — --label-center
Servidor
prod-api-01
Dirección IP
10.0.12.45
Memoria
16 GB DDR5
Tarjeta normal + barra de acento
ID de pedido
#ORD-2026-00847
Estado
Delivered
Pago
Visa *4242
Cliente
Elena Petrova
Tarjeta fantasma + Barra de acento
pa-card--ghost — same sizing, no visible container.
ID de pedido
#ORD-2026-00847
Estado
Delivered
Pago
Visa *4242
Cliente
Elena Petrova
8. Cuadrícula con barra de acento
Each property gets a color-coded left border. Good for status-heavy panels.
ID de pedido
#ORD-2026-00847
Estado
Delivered
Pago
Visa *4242
Cliente
Elena Petrova
Renovación
1 Jan 2027
Total
$1,249.00
Campos copiables
Three copy-to-clipboard styles applied to the new data display patterns. Click to test each variant.
Botón de copiar (siempre visible)
pa-banded__row--copy-btn
IP Address
10.0.12.45
Hash
sha256:e3b0c44298fc1c
Haz clic en el valor para copiar
pa-banded__row--copy-click
Server
prod-api-01
OS
Ubuntu 22.04 LTS
Icono solo al pasar el cursor
pa-banded__row--copy-hover
IBAN
CZ65 0800 0000 1920 0014 5399
BIC/SWIFT
GIBACZPX
Tarjeta de propiedad — Copiar al pasar el cursor
pa-prop-card__row--copy-hover
Order Details
Order ID
#ORD-2026-00847
Date
28 January 2026
Payment
Visa *4242
Total
$1,249.00
Tabla de descripciones — Botón de copiar
pa-desc-table__value--copy-btn
Reg. No.
CZ48207497
VAT ID
CZ48207497
Email
jan.novak@novakpartners.cz
Phone
+420 234 111 222
Cuadrícula de acento — Copiar al pasar el cursor
pa-accent-grid__item--copy-hover
Order ID
#ORD-2026-00847
Status
Delivered
Payment
Visa *4242
Customer
Elena Petrova
Renewal
1 Jan 2027
Total
$1,249.00
Real: factura combinando patrones
Descriptions table for customer, banded rows for addresses, dot leaders for totals.
Cliente
Nombre
Novak & Partners s.r.o.
N.º de reg.
CZ48207497
ID de VAT
CZ48207497
Contacto
Jan Novak
Correo electrónico
jan.novak@novakpartners.cz
Teléfono
+420 234 111 222
Dirección del recibo
Calle
Vinohradska 2468/164
Ciudad
Prague 3, 130 00
País
Czech Republic
Dirección de entrega
Calle
Prumyslova 1234/5
Ciudad
Brno-Slatina, 627 00
País
Czech Republic
Elementos
| Producto | SKU | Cant. | Precio | Total |
|---|---|---|---|---|
| Mechanical Keyboard | KB-MX-BRN | 2 | $149 | $298 |
| 27" 4K Monitor | MON-27-4K | 4 | $449 | $1,796 |
Subtotal
$2,094.00
Envío
$24.00
VAT 21%
$439.74
Total
$2,557.74
Referencia de CSS
| Class | Description |
|---|---|
| Descriptions Table | |
.pa-desc-table |
CSS Grid with 3 label-value pairs per row (default). Label cells get tinted background. |
.pa-desc-table--cols-2 |
2 label-value pairs per row |
.pa-desc-table--fixed |
Fixed-width label columns (default 14rem, override with --label-width CSS property) |
.pa-desc-table--middle |
Vertically center labels and values |
.pa-desc-table--label-end |
Right-align labels |
.pa-desc-table--label-center |
Center-align labels |
.pa-desc-table--truncate |
Single-line ellipsis on labels and values |
.pa-desc-table__label |
Label cell (tinted background, colon appended via CSS) |
.pa-desc-table__value |
Value cell |
.pa-desc-table__value--full |
Value spans all remaining columns |
.pa-desc-container |
Container query wrapper — desc-tables collapse to single column when parent is narrow |
| Dot Leaders | |
.pa-dot-leaders |
Flex column container for leader items |
.pa-dot-leaders__item |
Single row with label, dotted leader, and value |
.pa-dot-leaders__item--total |
Total row with top border and bold text |
.pa-dot-leaders__label |
Left-aligned label text |
.pa-dot-leaders__leader |
Dotted line filling space between label and value |
.pa-dot-leaders__value |
Right-aligned value text (tabular-nums) |
| Property Card | |
.pa-prop-card |
Bordered card with optional header and label-value rows |
.pa-prop-card__header |
Uppercase section header with tinted background |
.pa-prop-card__row |
Flex row with label and value |
.pa-prop-card__label |
Left-aligned label |
.pa-prop-card__value |
Right-aligned value |
.pa-prop-card__value--bold |
Bold value text |
| Banded Rows | |
.pa-banded |
Rows with fixed-width tinted label column (default 14rem) |
.pa-banded--narrow |
Narrow label column (10rem) |
.pa-banded--wide |
Wide label column (20rem) |
.pa-banded--middle |
Vertically center labels and values |
.pa-banded--label-end |
Right-align labels |
.pa-banded--label-center |
Center-align labels |
.pa-banded--truncate |
Single-line ellipsis on labels and values |
.pa-banded__row |
Flex row container |
.pa-banded__label |
Fixed-width tinted label (use wr-* utilities to override width) |
.pa-banded__value |
Flexible value area |
.pa-banded-container |
Container query wrapper — rows stack vertically when parent is narrow |
| Fields Modifiers | |
.pa-fields--linear |
Minimal side-by-side layout with fixed-width labels |
.pa-fields--chips |
Inline flow with pill-styled values |
.pa-field__value--success |
Green chip color (use with --chips) |
.pa-field__value--warning |
Orange chip color |
.pa-field__value--danger |
Red chip color |
.pa-fields-container |
Container query wrapper for responsive field layouts |
| Accent Grid | |
.pa-accent-grid |
Auto-fill grid of items with color-coded left borders |
.pa-accent-grid__item |
Grid item with accent border |
.pa-accent-grid__item--success |
Green border |
.pa-accent-grid__item--warning |
Orange border |
.pa-accent-grid__item--danger |
Red border |
.pa-accent-grid__item--info |
Blue border |
.pa-accent-grid__label |
Small uppercase label |
.pa-accent-grid__value |
Prominent value text |
| Copyable (Accent Grid) | |
.pa-accent-grid__item--copy-btn |
Always-visible copy button on accent grid item |
.pa-accent-grid__item--copy-hover |
Copy button appears on item hover |
.pa-accent-grid__item--copy-click |
Click value to copy, shows hint on hover |
.pa-accent-grid__copy |
Copy button element inside accent grid value |
| Copyable (Banded) | |
.pa-banded__row--copy-btn |
Always-visible copy button on banded row |
.pa-banded__row--copy-hover |
Copy button appears on row hover |
.pa-banded__row--copy-click |
Click value to copy, shows hint on hover |
.pa-banded__copy |
Copy button element inside banded value |
| Copyable (Prop Card) | |
.pa-prop-card__row--copy-btn |
Always-visible copy button on prop-card row |
.pa-prop-card__row--copy-hover |
Copy button appears on row hover |
.pa-prop-card__row--copy-click |
Click value to copy |
.pa-prop-card__copy |
Copy button element inside prop-card value |
| Copyable (Desc Table) | |
.pa-desc-table__value--copy-btn |
Always-visible copy button on desc-table value cell |
.pa-desc-table__value--copy-hover |
Copy button appears on value hover |
.pa-desc-table__value--copy-click |
Click value to copy, shows hint on hover |
.pa-desc-table__copy |
Copy button element inside desc-table value |
| Utilities | |
.pc-cq |
General-purpose container query wrapper (container-type: inline-size) |