Initials — solid
Sizes
Photo
Group with overflow
Basic
Prefix & suffix text
Icon prefix & suffix
Password
Special suffix
States
Ghost (no background)
Soft (with background)
Default bg + semantic text (list context)
Sizes
Closable (level 1 delete — × inline)
1 + 1 (back + action)
Title
Label + 1 (labeled leading + action)
1 + 2 (back + two actions)
Title
1 + 3 (menu + three actions)
Time intervals
Full-width text
Full-width with icons
Icon + label (compact action)
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
Basic
Prefix & suffix text
Icon prefix & suffix
Special suffix
States
Flat (default)
You can track your container using the Operations module. Navigate to Bookings, select your booking reference, and view the live status updates from the vessel tracker.
Surface (card)
You can track your container using the Operations module. Navigate to Bookings, select your booking reference, and view the live status updates from the vessel tracker.
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
States
Primary (flat, on background)
Secondary (on surface)
States
Basic
With sections
With selection indicator
Disabled items
Default
Session expiring
Your session will expire in 30 minutes.Success
Booking confirmed
Booking #BK-2024-1234 has been successfully confirmed.Warning
Permit expiring soon
Permit PTW-0042 expires in 2 days. Renew before work resumes.Danger
Vessel data unavailable
Real-time tracking is offline. Check your AIS connection.Accent
New feature available
Bulk booking operations are now available in your plan.Title only
Changes saved successfully.
Failed to process request.
Variants
With description
With action
Basic
Placements
With arrow
On disabled button (wrapped)
Full profile — with cover & avatar
Carlos Mendez
ActiveMinimal — no cover, no avatar image
Ana Torres
PendingDestructive confirmation
Warning confirmation
Info / neutral
Basic — header + body + footer
With icon
Sizes
Scrollable body
Placements
With handle
Right sidebar pattern
Vertical (default)
Horizontal
Disabled state
Individual usage
Vertical (default)
Horizontal
Disabled
Disabled item
Vertical group
Individual usage
Horizontal group
Basic
| Reference | Vessel | Facility | Status | Arrival |
|---|---|---|---|---|
| BK-2024-001 | MSC Floriana | Puerto Buenos Aires | Active | 2024-03-15 |
| BK-2024-002 | Ever Given | Terminal Zárate | Pending | 2024-03-18 |
| BK-2024-003 | CMA CGM Marco Polo | Puerto Rosario | On Hold | 2024-03-20 |
| BK-2024-004 | COSCO Shipping | Puerto Buenos Aires | Closed | 2024-03-22 |
| BK-2024-005 | Maersk Sealand | Terminal Zárate | Active | 2024-03-25 |
With row selection (multiple)
| Reference | Vessel | Facility | Status | Arrival |
|---|---|---|---|---|
| BK-2024-001 | MSC Floriana | Puerto Buenos Aires | Active | 2024-03-15 |
| BK-2024-002 | Ever Given | Terminal Zárate | Pending | 2024-03-18 |
| BK-2024-003 | CMA CGM Marco Polo | Puerto Rosario | On Hold | 2024-03-20 |
| BK-2024-004 | COSCO Shipping | Puerto Buenos Aires | Closed | 2024-03-22 |
| BK-2024-005 | Maersk Sealand | Terminal Zárate | Active | 2024-03-25 |
Empty state
| Reference | Vessel | Facility | Status | Arrival |
|---|---|---|---|---|
No bookings found Try adjusting your filters. | ||||