List
BoxList, BulletList, and numerical list patterns for features, goals, and steps.
List
Box list
BoxList renders a responsive grid of bordered cards — each a title with an optional supporting line. Reach for it to present a set of features, services, or terms without hand-rolling the card + grid. Set columns (1–4; default 3), or vertical to stack items in a single column. size controls the box padding and textSize the type scale (sm · md · lg). Each item can carry a title, a description, or both. Optionally mark items: numerical adds a 01, 02, … eyebrow, check a Check icon, or bullet a leading dot. muted sits items on the muted surface instead of the card surface.
sm — with titles
sm — without titles
md — with titles
md — without titles
lg — with titles
lg — without titles
numerical — 01, 02, … eyebrow
check — leading Check icon
bullet — leading dot
vertical — single stacked column
muted — items on the muted surface
Bullet list — sm · md · lg
BulletList + BulletListItem render short unordered lists with a foreground-strong dot and body-text rhythm. Three sizes scale the text, dot, and row spacing together. Use for goals, features, or qualities where the heading already lives outside the list.
sm
- Pay service charges and rent reliably
- Submit and track maintenance requests
- Access and manage tenancy documents
md
- Pay service charges and rent reliably
- Submit and track maintenance requests
- Access and manage tenancy documents
lg
- Pay service charges and rent reliably
- Submit and track maintenance requests
- Access and manage tenancy documents
Numerical list
An ordered list for sequences where the order carries meaning — steps, rankings, or instructions. The marker uses muted-foreground with body-text rhythm so it tracks the bullet list above.
- Create your Adres account and verify your Emirates ID.
- Search listings and shortlist the properties you like.
- Message the owner or agent to arrange a viewing.
- Submit your offer and complete the paperwork online.