Property list | Arbol UI

Language

Appearance

A patient’s data

Stacked, in up to three columns as the width allows.

Document: CC 1.020.304.050
Birth date: May 4, 1990 · 36 years
Phone: +57 300 555 0101
Insurer: Sura EPS
Email: Not set
Status: Active

import { Badge, Link, Property, PropertyList } from '@arbol-ai/ui';

<PropertyList columns={3}>
  <Property label="Document">CC 1.020.304.050</Property>
  <Property label="Birth date">May 4, 1990 · 36 years</Property>
  <Property label="Phone">
    <Link href="tel:+573005550101">+57 300 555 0101</Link>
  </Property>
  <Property label="Insurer">Sura EPS</Property>
  <Property label="Email" />
  <Property label="Status">
    <Badge tone="success">Active</Badge>
  </Property>
</PropertyList>

An invoice’s totals

Inline: the label at the start, the value at the end, rows divided by hairlines.

Issued: Nov 1, 2026
Due: Nov 15, 2026
Subtotal: $1,042,017
Total: $1,240,000

import { Property, PropertyList } from '@arbol-ai/ui';

<PropertyList className="rounded-card max-w-sm border px-3" layout="inline">
  <Property label="Issued">Nov 1, 2026</Property>
  <Property label="Due">Nov 15, 2026</Property>
  <Property label="Subtotal">
    <span className="tabular-nums">$1,042,017</span>
  </Property>
  <Property label="Total">
    <span className="font-medium tabular-nums">$1,240,000</span>
  </Property>
</PropertyList>

Source

The examples above are src/blocks/property-list/property-list.examples.tsx, which the library’s tests render too.