diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
new file mode 100644
index 000000000..2d3928f3d
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import RadioCardDetail from './RadioCardDetail.vue'
+
+const modelValue = ref('test')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant id="default" title="Default">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover" title="Hover">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+
+    <Variant id="default-long-description" title="Long description">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover-long-description" title="Hover Long description">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+
+    <Variant id="default-selected" title="Default Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover-selected" title="Hover Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+
+    <Variant id="default-selected-long-description" title="Long description Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover-selected-long-description" title="Hover Long description Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
index 7840d7519..2158ab6c7 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
@@ -184,7 +184,8 @@ function updateCustomInput(event: Event) {
   opacity: 0;
 }
 
-.form_radio-card-detail:hover::before {
+.form_radio-card-detail:hover::before,
+.form_radio-card-detail._hover::before {
   --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
   width: 85%;
   opacity: 1;
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
new file mode 100644
index 000000000..73de6b392
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import RadioCardSimple from './RadioCardSimple.vue'
+
+const modelValue = ref('test')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant id="default" title="Default">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+      />
+    </Variant>
+
+    <Variant id="hover" title="Hover">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+        class="_hover"
+      />
+    </Variant>
+
+    <Variant id="default-selected" title="Default Selected">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="test"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+      />
+    </Variant>
+
+    <Variant id="hover-selected" title="Hover Selected">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="test"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+        class="_hover"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
index 09ea351f5..c6305040b 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
@@ -102,7 +102,8 @@ defineEmits<{
   opacity: 0;
 }
 
-.form_radio-card-simple:hover::before {
+.form_radio-card-simple:hover::before,
+.form_radio-card-simple._hover::before {
   --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
   width: 85%;
   opacity: 1;