Page Examples
Complete application page layouts — home dashboards, detail views, and settings screens.
Pages
16 variants
How To Use This Page
Page Examples sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 6 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Card layout with sidebar
Dark application sidebar with dashboard stats, activity, and quick actions.
Constrained grid layout
Stacked navigation with a centered, card-based overview page.
Stacked card layout
Project detail page with stateful tabs, milestones, and supporting metadata.
Multi-column directory
Searchable people directory with a persistent detail pane and quick actions.
With sidebar navigation and two-column form
Settings navigation paired with a structured form layout for profile fields.
With breadcrumbs and centered form
Centered settings workflow with interactive toggles and a clear danger zone.
Home screens
Good morning, Tom
Here's what changed across the business since yesterday.
Total Revenue
$48,890
+12.4% vs last week
Active Users
2,350
+4.8% vs last week
New Orders
48
+9.1% vs last week
Activity feed
Live updates from projects, ops, and sales.
Maya reviewed the launch checklist
Design QA completed for the April release.
12 minutes ago
Finance approved the enterprise quote
The proposal for Northwind moved to signed.
42 minutes ago
Tom assigned a new onboarding task
Implementation notes were added to the handoff.
1 hour ago
Quick links
Common destinations for the team.
Constrained grid layout
Stacked navigation with a centered, card-based overview page.
Program overview
A constrained dashboard with evenly weighted cards across the first view.
Projects
3 activeWebsite Redesign
In Review
Apr 18
Mobile Analytics
On Track
Apr 21
CRM Migration
Needs Input
Apr 26
Team
8 peopleTom Cook
Product Lead
Maya Lin
Designer
Ari Patel
Engineer
Recent Activity
TodayMaya reviewed the launch checklist
Design QA completed for the April release.
12 minutes ago
Finance approved the enterprise quote
The proposal for Northwind moved to signed.
42 minutes ago
Tom assigned a new onboarding task
Implementation notes were added to the handoff.
1 hour ago
Detail screens
Stacked card layout
Project detail page with stateful tabs, milestones, and supporting metadata.
Website Redesign
ActiveThe redesign project is focused on simplifying the marketing site, tightening conversion flows, and aligning content design across product launches.
Owner
Tom Cook
Timeline
Apr 12 - May 30
Budget
$84,000
Review cadence
Weekly
Milestones
Audit complete
Completed
Wireframes approved
Completed
Final QA review
Due next week
Multi-column directory
Searchable people directory with a persistent detail pane and quick actions.
Ben Torres
Product Designer
Phone
Recent activity
Uploaded new dashboard mocks
Commented on the onboarding audit
Requested feedback from the marketing team
Settings screens
Settings / Account
Profile
Name
Photo
Bio
Account Settings
A centered settings form with clear section separation.
Personal Info
Notifications
Email updates
Receive a summary when key projects change state.
Push alerts
Get urgent updates for blockers and approvals.
Weekly digest
A Friday summary of project performance and team activity.
Danger Zone
Delete account
Permanently remove your workspace profile and personal preferences.