On this page
Proposed CSC Standards · 0.1.0
Dashboard shells
The four application frames: classic, compact, floating, and public.
Place navigation and content in a frame that matches the product.
What this describes
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
When to use
- An internal overview with metrics.
- A public page that uses the top nav instead of a sidebar.
When not to use
- A single form with no navigation. Do not wrap it in a dashboard.
- A second shell inside DashboardShell.
Allowed variants
Classic
An internal app with a full sidebar.
- Hierarchy
- Sidebar plus content.
- Use in
- Admin tools.
- Restriction
- One shell.
- Accessibility
- Sidebar rules apply.
- Responsive
- Stacks under 760px.
Compact
A rail to save width.
- Hierarchy
- Tighter header.
- Use in
- Dense tools.
- Restriction
- Rail items stay named.
- Accessibility
- Sidebar rail rules.
- Responsive
- Stacks under 760px.
Floating
An inset workspace on a tinted canvas.
- Hierarchy
- Floating sidebar and white content.
- Use in
- Overview pages.
- Restriction
- Do not remove the canvas contrast.
- Accessibility
- Content is still a labeled region.
- Responsive
- The inset becomes full width when stacked.
Public
A public service page.
- Hierarchy
- Top navigation.
- Use in
- Public templates.
- Restriction
- No internal sidebar.
- Accessibility
- TopNav rules apply.
- Responsive
- The top nav wraps.
Mandatory rules
Use one of the four shells
classic, compact, floating, and public are different frames. Do not restyle one shell and call it another.
Implementation detail
Proposed CSC Standard. The four variants already change sidebar, padding, and navigation.
Choose one frame: classic, compact, floating, or public. Do not restyle one and call it another.
Check: The rendered shell includes the class for that variant, such as shell-floating.
Stack the shell and the metrics on a narrow frame
Under 760px the shell is a column and the metric row is one column.
Implementation detail
Proposed CSC Standard. The stylesheet already sets this at 760px.
Do not override .shell or .shell-metrics with a fixed multi-column layout.
Check: At 375px the sidebar stacks and metrics are one column. scrollWidth equals the frame width.
Public shell has no internal sidebar
variant="public" uses the top navigation.
Implementation detail
Proposed CSC Standard. A public page with an internal sidebar mixes two products.
Use variant="public" for public templates.
Check: The public shell shows Services and related links and no sidebar.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- One navigation landmark pattern per shell.
- Public does not add a sidebar.
- Headings remain in order inside the content.
Responsive behavior
- The 760px breakpoint stacks the shell.
- Metrics become one column.
- Public navigation wraps.
Component states
Wide
Sidebar beside content, except public.
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
Narrow
Column layout and one-column metrics.
Dashboard overview
Demonstration data only.
- Sample Applicant ACSC-24081Approved
- Sample Applicant BCSC-24082Pending
- Sample Applicant CCSC-24083Approved
- Sample Applicant DCSC-24084Review
Correct implementation
The content sits on a white panel over a gray canvas, with a main heading.
Imports: None. Dependencies: None. Rules: DSH-001, DSH-002.
export function Overview() {
return (
<div style={{ background: '#F6F8FC', padding: 12 }}>
<main style={{ background: '#fff', borderRadius: 16, padding: 14 }}>
<h1>Dashboard overview</h1>
</main>
</div>
);
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- Nesting a shell in a shell.
- Forcing three metric columns at 320px.
- Adding a sidebar to the public variant.
Testing checklist
Agent prompts for this component are in the AI Development Hub.