Workspace

Primary user: Service delivery staff

When to use

Use the workspace when your service needs to support regular, task-based work, such as:

• Reviewing and processing submissions
• Managing case files, applications, or requests
• Moving between dashboards, lists, and detail views
• Taking actions such as approve, deny, assign, or request more information

When not to use

• Citizen-facing services — use the public form pattern instead
• Content-only pages that don’t involve case management
• Simple internal tools that don’t need structured case processing

Sidebar navigation

Use the work side menu as the primary navigation for a workspace.

Keep top-level navigation focused on the main areas of work. When a user opens a record or case, switch to contextual navigation that supports that task. This puts the user into a focused mode with relevant navigation items (like sections of an application, comments, reminders) and a back link to return to the main view. The sidebar can adapt to what the user is doing, it doesn’t have to show everything at once.

Main workspace navigation

Contextual case navigation

Dashboard

The dashboard gives staff an overview of their work.

Include the information that helps them understand priorities and act quickly, such as:

• counts or status summaries
• trends or workload charts
• links to assigned or high-priority work

The layout uses containers and blocks to organize content into scannable sections.

Data views

Workers need different ways to view, scan, and act on records depending on the task. Choose the data view that best supports the task.

• Table view — Dense, scannable rows with sortable columns. Best for users who need to compare fields across many records at once.
• Card view — Each record as a card showing key details grouped into sections. Useful when records have more complex data that doesn’t fit neatly into columns.
• Expandable list view — Compact rows that expand inline to reveal detail. A middle ground between the density of a table and the richness of cards.

Any view can be combined with grouping (for example, group by priority or status) to organize records into collapsible sections. Users can also search, filter by status using tabs, sort with multi-level sorting, and manage active filters with filter chips.

Table view

Card view

Expandable list view

Case detail

Use the case detail view to help users review and act on a single record.

Break long content into sections using accordions to organize submitted data into collapsible sections. A table-of-contents sidebar helps users navigate long case content. Badges show case status, and action buttons in the header provide quick access to review, assign, and comment actions.

Sticky action bar

A scroll-aware header that pins to the top of the content area as the user scrolls. Use it to keep the most important tools visible.

Set the content for each page based on the task:

• On a cases list page, keep tools such as search and key actions visible.
• On a detail page, keep the case name and key actions visible.

Do not pin everything. Keep only the information and actions people need to continue their work without losing context.

Push drawer

Use a push drawer for focused work that should happen without leaving the current page.

This works well for actions such as:

• approving or denying a record
• requesting more information
• completing a short decision form
• reviewing supporting details while taking action

Use it when users need to keep the main record in view while completing the task.

Keyboard-accessible data views

Workspace data views use the data grid to make table and card layouts fully keyboard navigable. Users can use arrow keys to move between cells and rows, making it possible to scan and act on records without a mouse. This is especially important in workspace contexts where staff are processing high volumes of cases and keyboard navigation is significantly faster than clicking. For assistive technology users, screen readers announce cell content and position as the user navigates.

Components built for workspace

Workspace patterns are supported by component features designed for denser, more productive interfaces:

• Compact inputs — Every input component now has a compact variant that reduces height and spacing. This lets you build tighter forms and toolbars without sacrificing usability.
• Compact badges and notifications — Badges and notification banners also have compact sizing to fit within dense data views and action bars.
• Badge variants — Badges now include strong and subtle emphasis options, giving you control over visual weight depending on context.
• Data grid — The data grid works with the table component to support accessible, keyboard-navigable data views. Use them together when the user needs to move through records efficiently without relying on a mouse.
• Segmented tabs — A new tab variant that works as a segmented toggle for switching between views or modes within a workspace, rather than navigating between pages.
• Enhanced filter chips — Filter chips now support secondary text and secondary icons, making them more useful for richer filtering in workspace data views.

Considerations

• The reference demo is a spike — component customizations haven’t gone through the production pipeline yet
• There should be significant variability within a workspace to meet each service’s specific context and user needs
• The demo is a starting point to expand on and adapt, not a rigid template to copy exactly
• Desktop uses a card container pattern for the main content area; this is removed on mobile for space