---
title: "Radio Card"
canonical: https://sky-ui.cf.sky.com/components/radio-card
---

# Radio Card

Radio Card offers mutually exclusive options, providing more content than the Radio component

## Purpose

Radio Cards offer mutually exclusive options, providing more content than the [Radio](/components/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.

**Note:** **Please note:** that Radio Card is different from [Product Card](/components/product-card/),
  which is a pattern used when the user is adding or removing a product.

## Anatomy

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

1. **Container** <br/> The Radio Card provides a container for its content.

2. **Highlight Component (optional)** <br/> 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)** <br/> An optional image.

4. **Card Details** <br/> Dedicated area for headings, descriptions, and Price.

5. **Radio Indicator (optional)** <br/> Used to show whether the Radio Card is selected.

### Card Details Anatomy

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

1. **Card Title** <br/> Dedicated area for key messaging.

2. **Card Description (optional)** <br/> Dedicated area which supports the title.

3. **Price Component (optional)** <br/> Radio Cards utilise the Price component to indicate the price of the deal.

## Variants & States

- Status: Unselected, Selected, Error<br/>
- States: Default, Hover, Focus, Disabled/ReadOnly

    Unselected Radio Card in Default state, with Highlight, Image and Description.
  
    Selected Radio Card in Hover state, with Price, and Radio Indicator.