has been released! Read the upgrade guide


The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.


The panel component is a simple wrapper that visually separates content.


Use the Panel as a top level group for a page. It provides a great way to visually split separate, yet relevant information on a single screen.

2Sizing & Spacing

The Panel has no inherit sizing itself. It is designed to occupy 100% of its parent container, however can be modified to suit your needs.

3Hierarchy & Placement

Try to avoid nesting panels - components and data that relate should remain in the same visual hierarchy.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright