usage
- Use one panel per bounded task or evidence group
- Use accent only for a primary workflow panel
- Keep headings in page order
- Keep permissions, actions and task state in the consuming application
Administration
Panel
Group one bounded task with optional context, actions and supporting footer content.
Production component
Live preview
This example is rendered from the same package consumed by UJ applications.
Data exchange
Export programmes
Choose a scope and download a workbook for authorised review.
The workbook can be edited offline and returned through the validated import workflow.
Contract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
states
- default
- accent
- title only
- eyebrow and summary
- page actions
- footer
- long content
- narrow viewport
- dark theme
- forced colours
purpose
Group one bounded administration task with clear hierarchy, optional supporting context and actions without turning every content block into a card.
responsive
- Header actions wrap below context on narrow screens
- Full-width mobile actions
- 320px
- 768px
- 1440px
- 200% text resize
accessibility
- Section is named by its title when supplied
- Semantic header, body and footer regions
- Actions remain ordinary controls
- Accent is not the only indication of meaning
- Logical reading order
- WCAG 2.2 AA
runtime Boundary
The component performs no fetching, routing, authorization, mutation or workflow decisions.
source Authority
Corporate Identity presentation contract