Data List
Horizontal and vertical size scales, inline badges and mono IDs, and long-label i18n tolerance.
Data List
Sizes — sm · md · lg
Three sizes scale row padding, gap, and value typography together. Use sm for dense metadata strips (table inspectors, side rails), md as the default for detail panels, and lg when the DataList carries the page's primary specs (hero spec sheet).
sm
- Property type
- Villa
- Location
- Saadiyat Island
- Size
- 4,250 sq ft
- Bedrooms
- 5
- Year built
- 2023
md
- Property type
- Villa
- Location
- Saadiyat Island
- Size
- 4,250 sq ft
- Bedrooms
- 5
- Year built
- 2023
lg
- Property type
- Villa
- Location
- Saadiyat Island
- Size
- 4,250 sq ft
- Bedrooms
- 5
- Year built
- 2023
Vertical orientation — narrow containers
Pass orientation="vertical" to stack label above value. Use in narrow side panels or mobile detail sheets where the horizontal label column would compete with the value for width.
- Developer
- Aldar Properties
- Community
- Yas Acres
- Handover
- Q4 2025
- Payment plan
- 60/40 post-handover
Inline content — badges, mono IDs
DataListValue accepts any children, so badges, links, copy buttons, or alternate type treatments (mono font for IDs) slot in directly. Pass a className to override the default font-medium on a per-value basis.
- Status
- Available
- Furnishing
- Semi-furnished
- View
- Sea & Golf
- Service charge
- AED 18 / sq ft / yr
- Permit no.
- DLD-2024-00129847
Long labels — i18n tolerance
Horizontal labels use a min-width (not a fixed width) so a column of short labels aligns visually, but an unusually long label — common when translating to Arabic, German, or Russian — can grow to fit instead of being clipped or wrapping awkwardly.
- Owner
- Aldar Properties
- Title-deed registration number
- TD-AUH-2024-008471
- Sales & purchase agreement date
- 14 Apr 2024