Version
has been released! Read the upgrade guide

Card Frame

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 Card Frame is a very simple component designed to wrap all cards.

Overview

The Card component is a visual way of displaying information and actions. It can contain multiple sub-components, including items such as buttons, badges, or even images. The Card should always be kept to a single subject.

The Card Frame is a very simple component designed to wrap all cards.

1Anatomy

  1. Frame. This element wraps the component.

  2. Content. Components and content can be placed here. Ensure the content is related to a single subject.

2Sizing & Spacing

The Card component can shrink or grow depending on its content.

3Hierarchy & Placement

The Card component can be used either by itself, or alongside other card components. An individual card should only contain information relating to a single subject.

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