Data display
DescriptionList
Read-only key-value rows for a detail page.
@codeways/ui/description-list
Default
140px label column, empty values render an en dash, identifiers get a mono value and a hover copy button.
- Client
- Lanka Tea Exports
- Billing email
- [email protected]
- Currency
- AUD
- Terms
- Net 15
- Tax number
- 12-345-678-901
- Notes
- –
Aside + hairline
120px label column for a detail page's aside; a hairline between rows once there are more than ~6.
- Employee no.
- EMP-0042
- Designation
- Senior Engineer
- Manager
- Ruwan Jayasuriya
- Joined
- 12 Mar 2024
- Type
- Full-time
- Location
- Colombo
Usage
import { DescriptionList, DescriptionRow } from "@codeways/ui/description-list";
<DescriptionList>
<DescriptionRow label="Billing email">[email protected]</DescriptionRow>
<DescriptionRow label="Domain" mono copyValue="lankatea.com">lankatea.com</DescriptionRow>
</DescriptionList>