Card Frame

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.

PAYMENTS DUESUBSCRIPTION£12Outstanding Payments£4 /weekSubscription AmountCharli’s subscription is paid by Direct Debitevery Week.@charli0778 0548 372charli.roberts@mod.gov.ukPERSONALSubscriber DetailsPayment HistoryPausedCRCharli RobertsThe Card Component.

Anatomy

Card FrameContent12The Card Component.
  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.

Sizing & Spacing

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

Hierarchy & 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.

Basic Usage

Content
<CardFrame>Content</CardFrame>

Card Frame Properties

NameTypeRequiredDefaultDescription
childrenn/aFalsen/aArbitrary content for the card frame.