---
title: "Property list"
description: "A record’s properties as labels and values: stacked for a record’s data or an aside, inline for dates and amounts. An empty value shows a dash, read as “Not set”."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Property list

## A patient’s data

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

```tsx
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.

```tsx
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`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/property-list/property-list.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/property-list/index.mdx