diff --git a/addons/rose/addon/components/rose/form/radio/card/index.js b/addons/rose/addon/components/rose/form/radio/card/index.js
new file mode 100644
index 000000000..39463c62c
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/card/index.js
@@ -0,0 +1,7 @@
+import RoseFormRadioRadioComponent from '../radio';
+
+export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
+  // =attributes
+  layout = this.args.layout;
+  className = `rose-form-radio-card-${this.layout}`;
+}
diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
new file mode 100644
index 000000000..f527def6c
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -0,0 +1,110 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Radio/Radio/Card" component="Form/Radio/Radio/Card" />
+
+# Form Radiofield in a wide format
+
+Renders a form radiofield in a Wide format.
+
+```htmlbars
+<Rose::Form::Radio::Card
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  @layout='wide'
+  />
+```
+
+<Preview>
+  <Story name="Basic Wide" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::Card
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @helperText={{helperText}}
+        @layout='wide'
+        />
+    `,
+    context: {
+      label: text('text', 'AWS'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      helperText: text('helperText', 'Record financial transactions using'),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
+
+
+Renders a form radiofield in a tile format.
+
+```htmlbars
+<Rose::Form::Radio::Card
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  @layout='tile'
+  />
+```
+
+<Preview>
+  <Story name="Basic tile" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::Card
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @helperText={{helperText}}
+        @layout='tile'
+        />
+    `,
+    context: {
+      label: text('text', 'AWS'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      helperText: text('helperText', 'Record financial transactions using'),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/form/radio/card/tile/index.js b/addons/rose/addon/components/rose/form/radio/card/tile/index.js
deleted file mode 100644
index 10546dd73..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/tile/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import RoseFormRadioRadioComponent from '../../radio';
-
-export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
-  // =attributes
-
-  className = 'rose-form-radio-card-tile';
-}
diff --git a/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
deleted file mode 100644
index 84bb7f9be..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean, select } from '@storybook/addon-knobs';
-
-<Meta title="Rose|Form/Radio/Radio/Card/Tile" component="Form/Radio/Radio/Card/Tile" />
-
-# Form RadioCard field in tile format
-
-Renders a form radioCard field in a tile format.
-
-```htmlbars
-<Rose::Form::Radio::Card::Tile
-  @label="Yes"
-  @error={{false}}
-  @value="yes-agree"
-  @selectedValue="yes-agree"
-  @disabled={{false}}
-  @changed={{fn}}
-  />
-```
-
-<Preview>
-  <Story name="Tile" height="10rem">{{
-    template: hbs`
-      <Rose::Form::Radio::Card::Tile
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @helperText={{helperText}}
-        />
-    `,
-    context: {
-      label: text('text', 'AWS Tile'),
-      error: boolean('error', false),
-      value: text('value', 'value and selectedValue must match to select radiofield'),
-      selectedValue: text(
-        'selectedValue',
-        'value and selectedValue must match to select radiofield'
-      ),
-      helperText: text('helperText', 'Record financial transactions using'),
-      disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
-        },
-        null
-      ),
-    }
-  }}</Story>
-</Preview>
diff --git a/addons/rose/addon/components/rose/form/radio/card/wide/index.js b/addons/rose/addon/components/rose/form/radio/card/wide/index.js
deleted file mode 100644
index 3ba04b04d..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/wide/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import RoseFormRadioRadioComponent from '../../radio';
-
-export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
-  // =attributes
-
-  className = 'rose-form-radio-card-wide';
-}
diff --git a/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
deleted file mode 100644
index aa9b903a0..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean, select } from '@storybook/addon-knobs';
-
-<Meta title="Rose|Form/Radio/Radio/Card/Wide" component="Form/Radio/Radio/Card/Wide" />
-
-# Form Radiofield in a wide format
-
-Renders a form radiofield in a Wide format.
-
-```htmlbars
-<Rose::Form::Radio::Card::Wide
-  @label="Yes"
-  @error={{false}}
-  @value="yes-agree"
-  @selectedValue="yes-agree"
-  @disabled={{false}}
-  @changed={{fn}}
-  />
-```
-
-<Preview>
-  <Story name="Wide" height="10rem">{{
-    template: hbs`
-      <Rose::Form::Radio::Card::Wide
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @helperText={{helperText}}
-        />
-    `,
-    context: {
-      label: text('text', 'AWS'),
-      error: boolean('error', false),
-      value: text('value', 'value and selectedValue must match to select radiofield'),
-      selectedValue: text(
-        'selectedValue',
-        'value and selectedValue must match to select radiofield'
-      ),
-      helperText: text('helperText', 'Record financial transactions using'),
-      disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
-        },
-        null
-      ),
-    }
-  }}</Story>
-</Preview>
diff --git a/addons/rose/app/components/rose/form/radio/card.js b/addons/rose/app/components/rose/form/radio/card.js
new file mode 100644
index 000000000..8a1494dac
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio/card.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio/card';
diff --git a/addons/rose/app/components/rose/form/radio/card/tile/index.js b/addons/rose/app/components/rose/form/radio/card/tile/index.js
deleted file mode 100644
index a050dcff9..000000000
--- a/addons/rose/app/components/rose/form/radio/card/tile/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/form/radio/card/tile';
diff --git a/addons/rose/app/components/rose/form/radio/card/wide/index.js b/addons/rose/app/components/rose/form/radio/card/wide/index.js
deleted file mode 100644
index b239d9820..000000000
--- a/addons/rose/app/components/rose/form/radio/card/wide/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/form/radio/card/wide';
diff --git a/addons/rose/tests/integration/components/rose/form/radio/card-test.js b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
new file mode 100644
index 000000000..ba0f66206
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
@@ -0,0 +1,53 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/radio/card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card />`);
+    assert.ok(await find('input'));
+    assert.equal(await find('input').type, 'radio');
+  });
+
+  test('it renders in a tile format when tile layout is applied', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card @layout="tile"/>`);
+    assert.ok(await find('.rose-form-radio-card-tile'));
+  });
+
+  test('it supports an icon', async function (assert) {
+    await render(
+      hbs`<Rose::Form::Radio::Card @icon="flight-icons/svg/user-circle-16" />`
+    );
+    assert.ok(find('svg'));
+  });
+
+  test('it is checked when @value and @selectedValue values match', async function (assert) {
+    await render(
+      hbs`<Rose::Form::Radio::Card @value="tree" @selectedValue="tree"/>`
+    );
+    assert.true(await find('input').checked);
+  });
+
+  test('it is not disabled by default', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card />`);
+    assert.false(await find('input').disabled);
+  });
+
+  test('it is not in error state by default', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card />`);
+    assert.notOk(await find('.error'));
+  });
+
+  test('it is disabled when @disabled={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card @disabled={{true}}/>`);
+    assert.true(await find('input').disabled);
+  });
+
+  test('it is in error state when @error={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card @error={{true}} />`);
+    assert.ok(await find('.error'));
+  });
+});