diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx
index cdef9b83088..dc3cd285546 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/Examples.tsx
@@ -1,6 +1,11 @@
import ComponentBox from '../../../../../../shared/tags/ComponentBox'
import { Flex, P } from '@dnb/eufemia/src'
-import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
+import {
+ Form,
+ Field,
+ Wizard,
+ Value,
+} from '@dnb/eufemia/src/extensions/forms'
export const BasicUsage = () => {
return (
@@ -19,3 +24,30 @@ export const BasicUsage = () => {
)
}
+
+export const UsageInWizard = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx
index c02baef433b..7d9f516c67e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Card/demos.mdx
@@ -8,3 +8,7 @@ import * as Examples from './Examples'
## Demos
+
+
+
+
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts
index 56716295014..3032a2d46bb 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/Card.screenshot.test.ts
@@ -18,6 +18,14 @@ describe('Form.Card', () => {
})
expect(screenshot).toMatchImageSnapshot()
})
+
+ it('have to match outset when used in wizard', async () => {
+ const screenshot = await makeScreenshot({
+ url,
+ selector: '[data-visual-test="forms-card-in-wizard"]',
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
})
describe.each(['ui', 'sbanken'])(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-outset-when-used-in-wizard.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-outset-when-used-in-wizard.snap.png
new file mode 100644
index 00000000000..a90ae042c9b
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-outset-when-used-in-wizard.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
index abdabed701d..d5670f0e2df 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
@@ -1,6 +1,7 @@
.dnb-forms-wizard-layout {
&__contents {
.dnb-card {
+ // something with this adds outline
--card-outline-color: var(--color-pistachio);
}
}