Sitemap

MOJ building blocks

• Components

  • All MOJ components
  • Add another
  • Alert
  • API error
  • Badge
  • Button menu
  • Calendar
  • Card
  • Contextual date
  • Copy button
  • Date picker
  • Feedback banner
  • Filter
  • Identity bar
  • Inset text (highlighted)
  • Interruption card
  • Messages
  • Modal dialog
  • MOJ Header
  • Multi file upload
  • Multi select
  • New features banner
  • Notification badge
  • Numeric data
  • Organisation switcher
  • Outage banner
  • Page header actions
  • Pagination
  • Primary navigation
  • Progress tracker
  • Scrollable pane
  • Search
  • Side navigation
  • Sortable table
  • Sub navigation
  • Ticket Panel
  • Timeline
  • Timeout warning

• Patterns

  • Add to a list
  • Electronic signature
  • Filter a list
  • Get help
  • Upload files

• Pages

  • Case list pages

• Archive

  • Banner
  • Currency input
  • Form validator
  • Password reveal
  • Question pages
  • Rich text editor
  • Tag
  • Task list pages

Probation building blocks

• Probation styles

  • Layout

• Probation components

  • All probation components
  • PDS footer
  • PDS header

Guidance

• Content style guide

• Ethics

  • Designing ethical services
  • Preparing for a service assessment
  • Ethical principles
  • Ethics review

• Prototyping

  • Choosing a prototyping method
  • Setting up Figma prototypes
  • Setting up coded prototypes
  • Deploying coded prototypes

• Production

  • MOJ Frontend
  • Install with Node.js package manager (npm)
  • Try MOJ Frontend using precompiled files
  • Use Nunjucks
  • Import CSS
  • Import font and image assets
  • Import JavaScript

About the Design System

• Benefits
• Building block statuses
• Submit a component
• Roadmap
• Get help