Overview

Purpose

Radio Cards offer mutually exclusive options, providing more content than the Radio component.

Radio Cards are used for a configuration, where only one option has to be selected from a set. The set of Radio Cards should have a submit Button associated with it to confirm the selection.

Anatomy

The Radio Card component can be broken down into the following elements -

1. Container
   The Radio Card provides a container for its content.

2. Highlight Component (optional)
   Highlights are used to call attention to specific Radio Cards. The Highlight component can have its colours adjusted, but not it’s placement or sizing, these must remain fixed as per the default settings.

3. Image Placeholder Component (optional)
   An optional image.

4. Card Details
   Dedicated area for headings, descriptions, and Price.

5. Radio Indicator (optional)
   Used to show whether the Radio Card is selected.

6. Trim (optional)
   A coloured line can be used to tie in a product’s branding.

Card Details Anatomy

The card details area can be broken down into the following elements -

1. Card Title
   Dedicated area for key messaging.

2. Card Description (optional)
   Dedicated area which supports the title.

3. Price Component (optional)
   Radio Cards utilise the Price component to indicate the price of the deal.

Variants & States

• Status: Unselected, Selected, Error
  
• States: Default, Hover, Focus, Disabled/ReadOnly