From cf0d5b69940c44b0017fd4d1456f5b5e0d234552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Thu, 12 Oct 2023 11:26:19 +0200
Subject: [PATCH] feat(Card): add new Card component (beta) (#2744)

Move it out from Layout.
---
 .../src/docs/uilib/components/card.mdx        |  19 ++++++++
 .../{layout/Card => card}/Examples.tsx        |  20 ++++----
 .../{layout/Card => card}/demos.mdx           |   0
 .../components/{layout/Card => card}/info.mdx |   2 +-
 .../{layout/Card => card}/properties.mdx      |   0
 .../src/docs/uilib/components/layout/Card.mdx |  24 ---------
 .../docs/uilib/components/layout/Examples.tsx |  10 ++--
 .../layout/FlexContainer/Examples.tsx         |  28 +++++------
 .../components/layout/FlexContainer/info.mdx  |   2 +-
 .../components/layout/Stack/Examples.tsx      |  18 +++----
 .../src/docs/uilib/components/layout/info.mdx |   2 +-
 .../src/docs/uilib/extensions/forms.mdx       |  14 +++---
 .../docs/uilib/extensions/forms/Examples.tsx  |  46 +++++++++---------
 .../DataContext/Provider/Examples.tsx         |  10 ++--
 .../create-component/FieldBlock/info.mdx      |   2 +-
 .../extensions/forms/demo-cases/Examples.tsx  |  24 +++++----
 .../Form/ButtonRow/Examples.tsx               |   6 +--
 .../Form/Element/Examples.tsx                 |   6 +--
 .../Form/Handler/Examples.tsx                 |  10 ++--
 .../Form/MainHeading/Examples.tsx             |   6 +--
 .../Form/SubHeading/Examples.tsx              |  10 ++--
 .../forms/extended-features/Form/info.mdx     |   4 +-
 .../StepsLayout/StepsLayout/Examples.tsx      |   6 +--
 packages/dnb-eufemia/src/components/Card.ts   |  14 ++++++
 .../src/components/{layout => card}/Card.tsx  |   8 +--
 .../__tests__/Card.screenshot.test.ts         |   4 +-
 .../{layout => card}/__tests__/Card.test.tsx  |  24 ++++-----
 .../card-have-to-match-border.snap.png}       | Bin
 .../card-have-to-match-stack.snap.png}        | Bin
 .../dnb-eufemia/src/components/card/index.ts  |   8 +++
 .../dnb-eufemia/src/components/card/style.ts  |   6 +++
 .../style/dnb-card.scss}                      |   2 +-
 .../src/components/card/style/index.ts        |   6 +++
 packages/dnb-eufemia/src/components/index.ts  |   2 +
 .../layout/__tests__/Horizontal.test.tsx      |   2 +-
 .../layout/__tests__/Vertical.test.tsx        |   2 +-
 .../src/components/layout/index.ts            |   2 +-
 .../components/layout/style/dnb-layout.scss   |   1 -
 packages/dnb-eufemia/src/components/lib.ts    |   3 ++
 .../style/dnb-form-main-heading.scss          |   2 +-
 .../style/dnb-form-sub-heading.scss           |   2 +-
 .../StepsLayout/style/dnb-steps-layout.scss   |   2 +-
 packages/dnb-eufemia/src/index.ts             |   2 +
 .../src/style/dnb-ui-components.scss          |   1 +
 44 files changed, 202 insertions(+), 160 deletions(-)
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/card.mdx
 rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Card => card}/Examples.tsx (77%)
 rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Card => card}/demos.mdx (100%)
 rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Card => card}/info.mdx (83%)
 rename packages/dnb-design-system-portal/src/docs/uilib/components/{layout/Card => card}/properties.mdx (100%)
 delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card.mdx
 create mode 100644 packages/dnb-eufemia/src/components/Card.ts
 rename packages/dnb-eufemia/src/components/{layout => card}/Card.tsx (81%)
 rename packages/dnb-eufemia/src/components/{layout => card}/__tests__/Card.screenshot.test.ts (89%)
 rename packages/dnb-eufemia/src/components/{layout => card}/__tests__/Card.test.tsx (89%)
 rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutcard-have-to-match-border.snap.png => card/__tests__/__image_snapshots__/card-have-to-match-border.snap.png} (100%)
 rename packages/dnb-eufemia/src/components/{layout/__tests__/__image_snapshots__/layoutcard-have-to-match-stack.snap.png => card/__tests__/__image_snapshots__/card-have-to-match-stack.snap.png} (100%)
 create mode 100644 packages/dnb-eufemia/src/components/card/index.ts
 create mode 100644 packages/dnb-eufemia/src/components/card/style.ts
 rename packages/dnb-eufemia/src/components/{layout/style/layout-card.scss => card/style/dnb-card.scss} (96%)
 create mode 100644 packages/dnb-eufemia/src/components/card/style/index.ts

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card.mdx
new file mode 100644
index 00000000000..730f7b43971
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card.mdx
@@ -0,0 +1,19 @@
+---
+title: 'Card'
+description: '`Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.'
+showTabs: true
+status: 'beta'
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+---
+
+import Info from 'Docs/uilib/components/card/info'
+import Demos from 'Docs/uilib/components/card/demos'
+
+<Info />
+<Demos />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
similarity index 77%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/Examples.tsx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
index 83581073d20..fa1957aed6d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
@@ -1,11 +1,11 @@
-import { Layout, P } from '@dnb/eufemia/src'
-import ComponentBox from '../../../../../shared/tags/ComponentBox'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { Card, Layout, P } from '@dnb/eufemia/src'
 import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
   return (
     <ComponentBox>
-      <Layout.Card data-visual-test="layout-card-border">
+      <Card data-visual-test="layout-card-border">
         <P>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
           cursus pharetra elit in bibendum.
@@ -14,7 +14,7 @@ export const Default = () => {
           Praesent nunc ipsum, convallis eget convallis gravida, vehicula
           vitae metus.
         </P>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -22,10 +22,10 @@ export const Default = () => {
 export const Stack = () => {
   return (
     <ComponentBox scope={{ Field }} data-visual-test="layout-card-stack">
-      <Layout.Card stack>
+      <Card stack>
         <Field.String label="Label" value="Value" />
         <Field.String label="Label" value="Value" />
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -33,12 +33,12 @@ export const Stack = () => {
 export const VerticalFields = () => {
   return (
     <ComponentBox scope={{ Field }}>
-      <Layout.Card>
+      <Card>
         <Layout.Vertical>
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
         </Layout.Vertical>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -46,12 +46,12 @@ export const VerticalFields = () => {
 export const WithHeadingsAndAriaLabel = () => {
   return (
     <ComponentBox scope={{ Form }} hidePreview>
-      <Layout.Card aria-labelledby="unique-id">
+      <Card aria-labelledby="unique-id">
         <Form.SubHeading id="unique-id" space={0}>
           Heading
         </Form.SubHeading>
         <P>Content inside a landmark ...</P>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx
similarity index 100%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/demos.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/card/demos.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
similarity index 83%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/info.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
index 34170b323b7..212792477e5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
@@ -6,7 +6,7 @@ import * as Examples from './Examples'
 
 ## Description
 
-`Layout.Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
+`Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
 
 It uses [Layout.FlexItem](/uilib/components/layout/FlexItem) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Layout.FlexContainer](/uilib/components/layout/FlexContainer) will be used.
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx
similarity index 100%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/properties.mdx
rename to packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card.mdx
deleted file mode 100644
index 21add9de4d9..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 'Card (beta)'
-description: '`Layout.Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.'
-hideInMenu: true
-showTabs: true
-tabs:
-  - title: Info
-    key: '/info'
-  - title: Demos
-    key: '/demos'
-  - title: Properties
-    key: '/properties'
-breadcrumb:
-  - text: Layout
-    href: /uilib/components/layout/
-  - text: Card
-    href: /uilib/components/layout/Card/
----
-
-import Info from 'Docs/uilib/components/layout/Card/info'
-import Demos from 'Docs/uilib/components/layout/Card/demos'
-
-<Info />
-<Demos />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
index b8d2081e3fe..a08835f057c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import MediaQuery from '@dnb/eufemia/src/shared/MediaQuery'
-import { Layout, Slider, Code, Button } from '@dnb/eufemia/src'
+import { Layout, Slider, Code, Button, Card } from '@dnb/eufemia/src'
 import {
   TestElement,
   Field,
@@ -24,20 +24,20 @@ export const LayoutComponents = () => {
       <Layout.Stack>
         <Form.MainHeading>Profile</Form.MainHeading>
 
-        <Layout.Card stack>
+        <Card stack>
           <Form.SubHeading>Name</Form.SubHeading>
 
           <Field.String label="Fornavn" value="John" />
           <Field.String label="Etternavn" value="Smith" />
-        </Layout.Card>
+        </Card>
 
-        <Layout.Card stack>
+        <Card stack>
           <Form.SubHeading>More information</Form.SubHeading>
 
           <Field.NationalIdentityNumber value="20058512345" />
           <Field.Email value="john@smith.email" />
           <Field.PhoneNumber value="+47 98765432" />
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx
index 91f855642fe..2538e50ddcc 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Layout } from '@dnb/eufemia/src'
+import { Card, Layout } from '@dnb/eufemia/src'
 import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
@@ -125,9 +125,9 @@ export const VerticalWithCard = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
       <Layout.FlexContainer direction="vertical">
-        <Layout.Card>Card contents</Layout.Card>
-        <Layout.Card>Card contents</Layout.Card>
-        <Layout.Card>Card contents</Layout.Card>
+        <Card>Card contents</Card>
+        <Card>Card contents</Card>
+        <Card>Card contents</Card>
       </Layout.FlexContainer>
     </ComponentBox>
   )
@@ -136,12 +136,12 @@ export const VerticalWithCard = () => {
 export const VerticalWithFieldString = () => {
   return (
     <ComponentBox scope={{ TestElement, Field }}>
-      <Layout.Card>
+      <Card>
         <Layout.FlexContainer direction="vertical">
           <Field.String label="Label" value="Foo" />
           <Field.String label="Label" value="Foo" />
         </Layout.FlexContainer>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -152,12 +152,12 @@ export const VerticalSpaceDivider = () => {
       scope={{ TestElement, Field }}
       data-visual-test="layout-flex-container-divider"
     >
-      <Layout.Card>
+      <Card>
         <Layout.FlexContainer direction="vertical" divider="space">
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
         </Layout.FlexContainer>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -167,22 +167,22 @@ export const LayoutHorizontalFlexGrowItems = () => {
     <ComponentBox>
       <Layout.Horizontal>
         <Layout.FlexItem size={3}>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem size={4}>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem size={5}>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem grow>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem grow>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem grow>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
       </Layout.Horizontal>
     </ComponentBox>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx
index 71136751992..5d8a87854dd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx
@@ -6,7 +6,7 @@ showTabs: true
 
 `Layout.FlexContainer` is a building block for [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) based layout of contents and components.
 
-Ideally, use [Layout.FlexItem](/uilib/components/layout/FlexItem) or [Layout.Card](/uilib/components/layout/Card) for you inner wrappers.
+Ideally, use [Layout.FlexItem](/uilib/components/layout/FlexItem) or [Card](/uilib/components/card) for you inner wrappers.
 
 ## How spacing is applied
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx
index 556ec6059f4..d557f14bdc6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx
@@ -1,6 +1,6 @@
 import { Form } from '@dnb/eufemia/src/extensions/forms'
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Layout, P } from '@dnb/eufemia/src'
+import { Card, Layout, P } from '@dnb/eufemia/src'
 
 export const Default = () => {
   return (
@@ -56,14 +56,14 @@ export const WithCard = () => {
   return (
     <ComponentBox>
       <Layout.Stack>
-        <Layout.Card>
+        <Card>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
             cursus pharetra elit in bibendum. Vivamus tincidunt eleifend
             tellus at tempus. Aliquam at felis rutrum, luctus dui at,
             bibendum ipsum.
           </P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -74,14 +74,14 @@ export const WithCardAndHeading = () => {
     <ComponentBox scope={{ Form }}>
       <Layout.Stack>
         <Form.MainHeading>Main heading</Form.MainHeading>
-        <Layout.Card>
+        <Card>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
             cursus pharetra elit in bibendum. Vivamus tincidunt eleifend
             tellus at tempus. Aliquam at felis rutrum, luctus dui at,
             bibendum ipsum.
           </P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -93,14 +93,14 @@ export const WithCardAndHeadings = () => {
       <Layout.Stack>
         <Form.MainHeading>Main heading</Form.MainHeading>
         <Form.SubHeading>Sub heading</Form.SubHeading>
-        <Layout.Card>
+        <Card>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
             cursus pharetra elit in bibendum. Vivamus tincidunt eleifend
             tellus at tempus. Aliquam at felis rutrum, luctus dui at,
             bibendum ipsum.
           </P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -111,9 +111,9 @@ export const WithHeadingsAndAriaLabel = () => {
     <ComponentBox hidePreview scope={{ Form }}>
       <Layout.Stack aria-labelledby="unique-id">
         <Form.SubHeading id="unique-id">Heading</Form.SubHeading>
-        <Layout.Card>
+        <Card>
           <P>Content inside a landmark ...</P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
index 58415343e43..4e99e72e93b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
@@ -8,7 +8,7 @@ To make it easier to build application layout and [form](/uilib/extensions/forms
 
 ### Wrappers
 
-- **[Card](/uilib/components/layout/Card)** is a block section element showing the white box with rounded gray borders, adding spacing automatically.
+- **[Card](/uilib/components/card)** is a block section element showing the white box with rounded gray borders, adding spacing automatically.
 
 - **[Stack](/uilib/components/layout/Stack)** is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
index 0a260dfacd6..4f2508a4b43 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
@@ -38,15 +38,15 @@ The goal of the Forms extension is to make it easy to build forms and other data
 
 ### Layout
 
-When building your application forms, preferably use the [Layout](/uilib/components/layout) component. It seamlessly places all the fields and components of Eufemia Forms correctly into place.
+When building your application forms, preferably use the following layout components. They seamlessly places all the fields and components of Eufemia Forms correctly into place.
 
-- [Layout](/uilib/components/layout) for easy to outline and consistent application forms.
+- [Layout](/uilib/components/layout) for easy and consistent application forms.
+- [Card](/uilib/components/card) for the default card outline of forms.
 
 ### Additional features
 
 - [Feature fields](/uilib/extensions/forms/feature-fields) such as Email and PhoneNumber.
 - [Extended features](/uilib/extensions/forms/extended-features) such as the main [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) and [StepsLayout](/uilib/extensions/forms/extended-features/StepsLayout) for creating stepped forms.
-- [Layout](/uilib/components/layout) to apply default styles for application forms.
 
 ### Value components
 
@@ -81,7 +81,7 @@ render(
     onChange={...}
     onSubmit={...}
   >
-    <Layout.Card spacing="medium">
+    <Card spacing="medium">
       <Field.OrganizationNumber
         path="/companyOrganizationNumber"
         required
@@ -98,7 +98,7 @@ render(
         />
         <Field.Option value="other" title="Annet" />
       </Field.Selection>
-    </Layout.Card>
+    </Card>
   </Form.Handler>,
 )
 ```
@@ -110,9 +110,9 @@ import '@dnb/eufemia/extensions/forms/style'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
   <Form.Handler data={existingData} onSubmit={...}>
-    <Layout.Card spacing="medium">
+    <Card spacing="medium">
       <MyCustomComponent path="/companyName" required />
-    </Layout.Card>
+    </Card>
   </Form.Handler>,
 )
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
index 32751f403d7..de27931fcd6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
-import { Layout, Input, Slider } from '@dnb/eufemia/src'
+import { Layout, Input, Slider, Card } from '@dnb/eufemia/src'
 import {
   Form,
   StepsLayout,
@@ -160,7 +160,7 @@ export const BaseFieldComponents = () => {
         Visibility,
       }}
     >
-      <Layout.Card stack>
+      <Card stack>
         <Field.String
           label="Text field"
           value="Lorem Ipsum"
@@ -176,7 +176,7 @@ export const BaseFieldComponents = () => {
           value={true}
           onChange={(value) => console.log('onChange', value)}
         />
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -192,13 +192,13 @@ export const FeatureFields = () => {
         Visibility,
       }}
     >
-      <Layout.Card stack>
+      <Card stack>
         <Field.String label="Fornavn" value="John" />
         <Field.String label="Etternavn" value="Smith" />
         <Field.NationalIdentityNumber value="20058512345" />
         <Field.Email value="john@smith.email" />
         <Field.PhoneNumber value="+47 98765432" />
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -217,20 +217,20 @@ export const LayoutComponents = () => {
       <Layout.Stack>
         <Form.MainHeading>Profile</Form.MainHeading>
 
-        <Layout.Card stack>
+        <Card stack>
           <Form.SubHeading>Name</Form.SubHeading>
 
           <Field.String label="Fornavn" value="John" />
           <Field.String label="Etternavn" value="Smith" />
-        </Layout.Card>
+        </Card>
 
-        <Layout.Card stack>
+        <Card stack>
           <Form.SubHeading>More information</Form.SubHeading>
 
           <Field.NationalIdentityNumber value="20058512345" />
           <Field.Email value="john@smith.email" />
           <Field.PhoneNumber value="+47 98765432" />
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -265,12 +265,12 @@ export const VisibilityBasedOnData = () => {
         <Layout.Stack>
           <Form.MainHeading>Profile</Form.MainHeading>
 
-          <Layout.Card stack>
+          <Card stack>
             <Form.SubHeading>Name</Form.SubHeading>
 
             <Field.String path="/firstName" label="Fornavn" />
             <Field.String path="/lastName" label="Etternavn" />
-          </Layout.Card>
+          </Card>
         </Layout.Stack>
         <Field.Boolean
           path="/advanced"
@@ -279,13 +279,13 @@ export const VisibilityBasedOnData = () => {
         />
         <Visibility pathTrue="/advanced">
           <Layout.Stack>
-            <Layout.Card stack>
+            <Card stack>
               <Form.SubHeading>More information</Form.SubHeading>
 
               <Field.NationalIdentityNumber value="20058512345" />
               <Field.Email value="john@smith.email" />
               <Field.PhoneNumber value="+47 98765432" />
-            </Layout.Card>
+            </Card>
           </Layout.Stack>
         </Visibility>
       </Form.Handler>
@@ -320,7 +320,7 @@ export const UsingFormHandler = () => {
       >
         <Form.MainHeading>Profile</Form.MainHeading>
 
-        <Layout.Card stack>
+        <Card stack>
           <Field.String path="/firstName" label="Fornavn" />
           <Field.String path="/lastName" label="Etternavn" />
           <Field.NationalIdentityNumber path="/ssn" />
@@ -330,7 +330,7 @@ export const UsingFormHandler = () => {
           <Form.ButtonRow>
             <Form.SubmitButton />
           </Form.ButtonRow>
-        </Layout.Card>
+        </Card>
       </Form.Handler>
     </ComponentBox>
   )
@@ -363,13 +363,13 @@ export const Validation = () => {
       >
         <Form.MainHeading>Profile</Form.MainHeading>
 
-        <Layout.Card stack>
+        <Card stack>
           <Field.String path="/firstName" label="Fornavn" required />
           <Field.String path="/lastName" label="Etternavn" required />
           <Field.NationalIdentityNumber path="/ssn" validateInitially />
           <Field.Email path="/email" validateInitially />
           <Field.PhoneNumber path="/phone" validateInitially />
-        </Layout.Card>
+        </Card>
       </Form.Handler>
     </ComponentBox>
   )
@@ -405,12 +405,12 @@ export const WithSteps = () => {
           <StepsLayout.Step title="Name">
             <Form.MainHeading>Profile</Form.MainHeading>
 
-            <Layout.Card stack>
+            <Card stack>
               <Form.SubHeading>Name</Form.SubHeading>
 
               <Field.String path="/firstName" label="Fornavn" required />
               <Field.String path="/lastName" label="Etternavn" required />
-            </Layout.Card>
+            </Card>
 
             <Form.ButtonRow>
               <StepsLayout.NextButton />
@@ -420,13 +420,13 @@ export const WithSteps = () => {
           <StepsLayout.Step title="More information">
             <Form.MainHeading>Profile</Form.MainHeading>
 
-            <Layout.Card stack>
+            <Card stack>
               <Form.SubHeading>More information</Form.SubHeading>
 
               <Field.NationalIdentityNumber path="/ssn" />
               <Field.Email path="/email" />
               <Field.PhoneNumber path="/phone" />
-            </Layout.Card>
+            </Card>
 
             <Form.ButtonRow>
               <StepsLayout.PreviousButton />
@@ -437,7 +437,7 @@ export const WithSteps = () => {
           <StepsLayout.Step title="Summary">
             <Form.MainHeading>Profile</Form.MainHeading>
 
-            <Layout.Card stack>
+            <Card stack>
               <Layout.FlexContainer>
                 <Value.String path="/firstName" label="Fornavn" />
                 <Value.String path="/lastName" label="Etternavn" />
@@ -446,7 +446,7 @@ export const WithSteps = () => {
               <Value.NationalIdentityNumber path="/ssn" />
               <Value.Email path="/email" />
               <Value.PhoneNumber path="/phone" />
-            </Layout.Card>
+            </Card>
 
             <Form.ButtonRow>
               <StepsLayout.PreviousButton />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx
index c3adc8e0b8a..3f39ce06919 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/DataContext/Provider/Examples.tsx
@@ -6,7 +6,7 @@ import {
   Field,
   Value,
 } from '@dnb/eufemia/src/extensions/forms'
-import { Layout } from '@dnb/eufemia/src'
+import { Card, Layout } from '@dnb/eufemia/src'
 
 export const TestdataSchema: JSONSchema7 = {
   type: 'object',
@@ -98,7 +98,7 @@ export const Default = () => {
         sessionStorageId="provider-example-1"
       >
         <Layout.Stack>
-          <Layout.Card>
+          <Card>
             <Layout.Vertical divider="line" spacing="small">
               <Field.String
                 path="/requiredString"
@@ -160,7 +160,7 @@ export const Default = () => {
                 <Form.SubmitButton />
               </Form.ButtonRow>
             </Layout.Vertical>
-          </Layout.Card>
+          </Card>
         </Layout.Stack>
       </DataContext.Provider>
     </ComponentBox>
@@ -190,7 +190,7 @@ export const ValidationWithJsonSchema = () => {
         onSubmitRequest={() => console.log('onSubmitRequest')}
       >
         <Layout.Stack>
-          <Layout.Card>
+          <Card>
             <Layout.Vertical divider="line" spacing="small">
               <Field.String
                 path="/requiredString"
@@ -250,7 +250,7 @@ export const ValidationWithJsonSchema = () => {
                 <Form.SubmitButton />
               </Form.ButtonRow>
             </Layout.Vertical>
-          </Layout.Card>
+          </Card>
         </Layout.Stack>
       </DataContext.Provider>
     </ComponentBox>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx
index 7a2120b4978..0a8f4aa4304 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/info.mdx
@@ -8,7 +8,7 @@ import Demos from 'Docs/uilib/extensions/forms/create-component/FieldBlock/demos
 
 `FieldBlock` is a reusable wrapper for building [Field](/uilib/extensions/forms/create-component/Field) or [Value](/uilib/extensions/forms/create-component/Value) components.
 
-It shows surrounding elements through properties from `FieldProps` like `label` and `error`, and ensure that spacing between different fields work as required when put into surrounding components like [FlexContainer](/uilib//components/layout/FlexContainer/) or [Card](/uilib//components/layout/Card/).
+It shows surrounding elements through properties from `FieldProps` like `label` and `error`, and ensure that spacing between different fields work as required when put into surrounding components like [FlexContainer](/uilib//components/layout/FlexContainer/) or [Card](/uilib/components/card/).
 
 It can also be used to group multiple inner FieldBlock components, composing status (error) messages together as one component.
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx
index 92e0b02590f..56166d34b82 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/demo-cases/Examples.tsx
@@ -1,5 +1,11 @@
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { GlobalStatus, Section, Code, Layout } from '@dnb/eufemia/src'
+import {
+  GlobalStatus,
+  Section,
+  Code,
+  Layout,
+  Card,
+} from '@dnb/eufemia/src'
 import * as React from 'react'
 import {
   Form,
@@ -36,7 +42,7 @@ export const BecomeCorporateCustomer = () => {
                     <Form.MainHeading>
                       Bedriftsopplysninger
                     </Form.MainHeading>
-                    <Layout.Card spacing="medium">
+                    <Card spacing="medium">
                       <Field.OrganizationNumber
                         path="/companyOrganizationNumber"
                         required
@@ -90,8 +96,8 @@ export const BecomeCorporateCustomer = () => {
                         label="Etableringsland"
                         required
                       />
-                    </Layout.Card>
-                    <Layout.Card spacing="medium">
+                    </Card>
+                    <Card spacing="medium">
                       <Field.PhoneNumber
                         path="/phoneNumber"
                         label="Telefon/mobilnummer"
@@ -102,7 +108,7 @@ export const BecomeCorporateCustomer = () => {
                         path="/website"
                         label="Nettstedsadresse (valgfritt)"
                       />
-                    </Layout.Card>
+                    </Card>
 
                     <Form.ButtonRow>
                       <StepsLayout.NextButton />
@@ -112,13 +118,13 @@ export const BecomeCorporateCustomer = () => {
                   <StepsLayout.Step title="Kontaktperson">
                     <Form.MainHeading>Profile</Form.MainHeading>
 
-                    <Layout.Card stack>
+                    <Card stack>
                       <Form.SubHeading>More information</Form.SubHeading>
 
                       <Field.NationalIdentityNumber path="/ssn" />
                       <Field.Email path="/email" />
                       <Field.PhoneNumber path="/phone" />
-                    </Layout.Card>
+                    </Card>
 
                     <Form.ButtonRow>
                       <StepsLayout.PreviousButton />
@@ -153,7 +159,7 @@ export const BecomeCorporateCustomer = () => {
                   <StepsLayout.Step title="Oppsummering">
                     <Form.MainHeading>Profile</Form.MainHeading>
 
-                    <Layout.Card stack>
+                    <Card stack>
                       <Layout.FlexContainer>
                         <Value.String path="/firstName" />
                         <Value.String path="/lastName" />
@@ -162,7 +168,7 @@ export const BecomeCorporateCustomer = () => {
                       <Value.NationalIdentityNumber path="/ssn" />
                       <Value.Email path="/email" />
                       <Value.PhoneNumber path="/phone" />
-                    </Layout.Card>
+                    </Card>
 
                     <Form.ButtonRow>
                       <StepsLayout.PreviousButton />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/Examples.tsx
index 09f6654afad..ecf05b11a8a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/ButtonRow/Examples.tsx
@@ -4,7 +4,7 @@ import {
   Form,
   Field,
 } from '@dnb/eufemia/src/extensions/forms'
-import { Button, Layout } from '@dnb/eufemia/src'
+import { Button, Card } from '@dnb/eufemia/src'
 import { send as sendIcon } from '@dnb/eufemia/src/icons'
 
 export const Default = () => {
@@ -23,13 +23,13 @@ export const WithLayout = () => {
   return (
     <ComponentBox scope={{ Form, Field, sendIcon }}>
       <Form.Element onSubmit={(event) => console.log('onSubmit', event)}>
-        <Layout.Card spacing="medium">
+        <Card spacing="medium">
           <Field.Email />
           <Form.ButtonRow>
             <Form.SubmitButton icon={sendIcon} />
             <Button variant="secondary">Cancel</Button>
           </Form.ButtonRow>
-        </Layout.Card>
+        </Card>
       </Form.Element>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Element/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Element/Examples.tsx
index 7ffeaff0139..328302a1de7 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Element/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Element/Examples.tsx
@@ -1,17 +1,17 @@
 import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
 import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
-import { Layout } from '@dnb/eufemia/src'
+import { Card } from '@dnb/eufemia/src'
 
 export const DefaultElement = () => {
   return (
     <ComponentBox scope={{ Form, Field }}>
       <Form.Element onSubmit={(event) => console.log('onSubmit', event)}>
-        <Layout.Card spacing="medium">
+        <Card spacing="medium">
           <Field.Email />
           <Form.ButtonRow>
             <Form.SubmitButton />
           </Form.ButtonRow>
-        </Layout.Card>
+        </Card>
       </Form.Element>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/Examples.tsx
index 8b27b346e98..237715d8703 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/Examples.tsx
@@ -1,6 +1,6 @@
 import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
 import { Form, Field } from '@dnb/eufemia/src/extensions/forms'
-import { Layout } from '@dnb/eufemia/src'
+import { Card } from '@dnb/eufemia/src'
 
 export const Default = () => {
   return (
@@ -9,12 +9,12 @@ export const Default = () => {
         defaultData={{ email: null }}
         onSubmit={(event) => console.log('onSubmit', event)}
       >
-        <Layout.Card spacing="medium">
+        <Card spacing="medium">
           <Field.Email path="/email" />
           <Form.ButtonRow>
             <Form.SubmitButton />
           </Form.ButtonRow>
-        </Layout.Card>
+        </Card>
       </Form.Handler>
     </ComponentBox>
   )
@@ -27,13 +27,13 @@ export const SessionStorage = () => {
         onSubmit={(event) => console.log('onSubmit', event)}
         sessionStorageId="session-key"
       >
-        <Layout.Card spacing="medium">
+        <Card spacing="medium">
           <Field.String label="Name" path="/name" />
           <Field.Email path="/email" />
           <Form.ButtonRow>
             <Form.SubmitButton />
           </Form.ButtonRow>
-        </Layout.Card>
+        </Card>
       </Form.Handler>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx
index 3da20497653..d0b5094d169 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/MainHeading/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
-import { Layout, P } from '@dnb/eufemia/src'
+import { Card, Layout, P } from '@dnb/eufemia/src'
 import { Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
@@ -32,9 +32,9 @@ export const OverStackWithCard = () => {
     >
       <Form.MainHeading>This is a main heading</Form.MainHeading>
       <Layout.Stack>
-        <Layout.Card>
+        <Card>
           <P>Card contents</P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx
index e0e6743eb00..b51fb64e93e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/SubHeading/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
-import { Layout, P } from '@dnb/eufemia/src'
+import { Card, Layout, P } from '@dnb/eufemia/src'
 import { Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const TextOnly = () => {
@@ -39,12 +39,12 @@ export const InsideCard = () => {
       scope={{ Form }}
       data-visual-test="layout-sub-heading-inside-card"
     >
-      <Layout.Card>
+      <Card>
         <Layout.Stack>
           <Form.SubHeading>This is a sub heading</Form.SubHeading>
           <P>Card contents</P>
         </Layout.Stack>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -57,9 +57,9 @@ export const OverStackWithCard = () => {
     >
       <Form.SubHeading>This is a sub heading</Form.SubHeading>
       <Layout.Stack>
-        <Layout.Card>
+        <Card>
           <P>Card contents</P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx
index e5cf2e27a19..76fc78b729c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/info.mdx
@@ -11,12 +11,12 @@ import { Layout } from '@dnb/eufemia'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
   <Form.Handler data={existingData} onSubmit={submitHandler}>
-    <Layout.Card>
+    <Card>
       <Field.Email path="/dataPath" />
       <Form.ButtonRow>
         <Form.SubmitButton />
       </Form.ButtonRow>
-    </Layout.Card>
+    </Card>
   </Form.Handler>,
 )
 ```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx
index dd10d803d4f..9edbf3d438b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/StepsLayout/StepsLayout/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
-import { Layout, P } from '@dnb/eufemia/src'
+import { Card, P } from '@dnb/eufemia/src'
 import { StepsLayout, Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
@@ -11,9 +11,9 @@ export const Default = () => {
       <StepsLayout>
         <StepsLayout.Step title="Step 1">
           <Form.MainHeading>Step 1</Form.MainHeading>
-          <Layout.Card>
+          <Card>
             <P>Step 1 contents</P>
-          </Layout.Card>
+          </Card>
           <StepsLayout.NextButton />
         </StepsLayout.Step>
         <StepsLayout.Step title="Step 2">
diff --git a/packages/dnb-eufemia/src/components/Card.ts b/packages/dnb-eufemia/src/components/Card.ts
new file mode 100644
index 00000000000..5f5a25fac13
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/Card.ts
@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index card to autogenerate all the components and extensions
+ * Used by "prepareCards"
+ */
+
+import Card from './card/Card'
+export * from './card/Card'
+export default Card
diff --git a/packages/dnb-eufemia/src/components/layout/Card.tsx b/packages/dnb-eufemia/src/components/card/Card.tsx
similarity index 81%
rename from packages/dnb-eufemia/src/components/layout/Card.tsx
rename to packages/dnb-eufemia/src/components/card/Card.tsx
index e82167f164e..cdb734727e5 100644
--- a/packages/dnb-eufemia/src/components/layout/Card.tsx
+++ b/packages/dnb-eufemia/src/components/card/Card.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import classnames from 'classnames'
 import FlexContainer, {
   Props as FlexContainerProps,
-} from './FlexContainer'
-import FlexItem, { Props as FlexItemProps } from './FlexItem'
+} from '../layout/FlexContainer'
+import FlexItem, { Props as FlexItemProps } from '../layout/FlexItem'
 
 export type Props = FlexContainerProps &
   FlexItemProps & {
@@ -24,7 +24,7 @@ function Card(props: Props) {
   if (stack || direction || spacing) {
     return (
       <FlexContainer
-        className={classnames('dnb-layout-card', className)}
+        className={classnames('dnb-card', className)}
         direction={direction ?? 'vertical'}
         divider={stack ? 'line' : 'space'}
         element="section"
@@ -40,7 +40,7 @@ function Card(props: Props) {
 
   return (
     <FlexItem
-      className={classnames('dnb-layout-card', className)}
+      className={classnames('dnb-card', className)}
       alignSelf={alignSelf}
       element="section"
       {...rest}
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/Card.screenshot.test.ts b/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts
similarity index 89%
rename from packages/dnb-eufemia/src/components/layout/__tests__/Card.screenshot.test.ts
rename to packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts
index 2f4458297ed..de75df5288c 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/Card.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/components/card/__tests__/Card.screenshot.test.ts
@@ -8,9 +8,9 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('Layout.Card', () => {
+describe('Card', () => {
   setupPageScreenshot({
-    url: '/uilib/components/layout/Card/demos',
+    url: '/uilib/components/card/demos',
   })
 
   it('have to match border', async () => {
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/Card.test.tsx b/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx
similarity index 89%
rename from packages/dnb-eufemia/src/components/layout/__tests__/Card.test.tsx
rename to packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx
index 1a4f39dd48c..3e2c8828149 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/Card.test.tsx
+++ b/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Card from '../Card'
+import Card from '../../card/Card'
 import { P } from '../../../elements'
 
-describe('Layout.Card', () => {
+describe('Card', () => {
   it('should forward HTML attributes', () => {
     render(
       <Card aria-label="Aria Label">
@@ -12,7 +12,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
     const attributes = Array.from(element.attributes).map(
       (attr) => attr.name
     )
@@ -29,7 +29,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
 
     expect(element.classList).toContain('dnb-space__top--large')
 
@@ -51,12 +51,12 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-space',
       'dnb-layout-flex-item',
-      'dnb-layout-card',
+      'dnb-card',
       'custom-class',
       'dnb-layout-flex-item--align-self-stretch',
     ])
@@ -70,7 +70,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
 
     expect(element.childNodes).toHaveLength(2)
     expect(element.textContent).toBe('ParagraphParagraph')
@@ -98,7 +98,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
     const children = element.children
 
     expect(element.className).toContain(
@@ -132,7 +132,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
 
     expect(element.className).toContain(
       'dnb-layout-flex-container--direction-vertical'
@@ -156,7 +156,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
 
     expect(element.tagName).toBe('SECTION')
   })
@@ -168,7 +168,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
 
     expect(element.tagName).toBe('ARTICLE')
   })
@@ -182,7 +182,7 @@ describe('Layout.Card', () => {
       </Card>
     )
 
-    const element = document.querySelector('.dnb-layout-card')
+    const element = document.querySelector('.dnb-card')
     const children = element.children
 
     expect(element.className).toContain(
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutcard-have-to-match-border.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-border.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutcard-have-to-match-border.snap.png
rename to packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-border.snap.png
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutcard-have-to-match-stack.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-stack.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/components/layout/__tests__/__image_snapshots__/layoutcard-have-to-match-stack.snap.png
rename to packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-have-to-match-stack.snap.png
diff --git a/packages/dnb-eufemia/src/components/card/index.ts b/packages/dnb-eufemia/src/components/card/index.ts
new file mode 100644
index 00000000000..b960d12a93c
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/card/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import Card from './Card'
+export default Card
+export * from './Card'
diff --git a/packages/dnb-eufemia/src/components/card/style.ts b/packages/dnb-eufemia/src/components/card/style.ts
new file mode 100644
index 00000000000..6203a2c07ea
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/card/style.ts
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './style/dnb-card.scss'
diff --git a/packages/dnb-eufemia/src/components/layout/style/layout-card.scss b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
similarity index 96%
rename from packages/dnb-eufemia/src/components/layout/style/layout-card.scss
rename to packages/dnb-eufemia/src/components/card/style/dnb-card.scss
index d7b9e2e4c63..d9e536bd09e 100644
--- a/packages/dnb-eufemia/src/components/layout/style/layout-card.scss
+++ b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
@@ -1,4 +1,4 @@
-.dnb-layout-card {
+.dnb-card {
   --background-color: var(--color-white);
   --border-color: var(--color-lavender);
   --border-width: 0.25rem;
diff --git a/packages/dnb-eufemia/src/components/card/style/index.ts b/packages/dnb-eufemia/src/components/card/style/index.ts
new file mode 100644
index 00000000000..65a9ff6aa0d
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/card/style/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-card.scss'
diff --git a/packages/dnb-eufemia/src/components/index.ts b/packages/dnb-eufemia/src/components/index.ts
index 2e940f011ef..e1908c24f7c 100644
--- a/packages/dnb-eufemia/src/components/index.ts
+++ b/packages/dnb-eufemia/src/components/index.ts
@@ -17,6 +17,7 @@ import Avatar from './avatar/Avatar'
 import Badge from './badge/Badge'
 import Breadcrumb from './breadcrumb/Breadcrumb'
 import Button from './button/Button'
+import Card from './card/Card'
 import Checkbox from './checkbox/Checkbox'
 import DatePicker from './date-picker/DatePicker'
 import Dialog from './dialog/Dialog'
@@ -69,6 +70,7 @@ export {
   Badge,
   Breadcrumb,
   Button,
+  Card,
   Checkbox,
   DatePicker,
   Dialog,
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx b/packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx
index 68c099bb25e..fc52c5c8a0c 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx
+++ b/packages/dnb-eufemia/src/components/layout/__tests__/Horizontal.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Horizontal from '../Horizontal'
-import Card from '../Card'
+import Card from '../../card/Card'
 
 describe('Layout.Horizontal', () => {
   it('should forward HTML attributes', () => {
diff --git a/packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx b/packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx
index 5789a324538..a8b42c30b46 100644
--- a/packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx
+++ b/packages/dnb-eufemia/src/components/layout/__tests__/Vertical.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Vertical from '../Vertical'
-import Card from '../Card'
+import Card from '../../card/Card'
 
 describe('Layout.Vertical', () => {
   it('should forward HTML attributes', () => {
diff --git a/packages/dnb-eufemia/src/components/layout/index.ts b/packages/dnb-eufemia/src/components/layout/index.ts
index 55474555329..a17e033d632 100644
--- a/packages/dnb-eufemia/src/components/layout/index.ts
+++ b/packages/dnb-eufemia/src/components/layout/index.ts
@@ -1,4 +1,4 @@
-export { default as Card } from './Card'
+export { default as Card } from '../card/Card'
 export { default as FlexContainer } from './FlexContainer'
 export { default as FlexItem } from './FlexItem'
 export { default as GridContainer } from './GridContainer'
diff --git a/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss b/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss
index 33464150036..224bba8bcec 100644
--- a/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss
+++ b/packages/dnb-eufemia/src/components/layout/style/dnb-layout.scss
@@ -1,4 +1,3 @@
-@import './layout-card.scss';
 @import './layout-flex-container.scss';
 @import './layout-flex-item.scss';
 @import './layout-grid-container.scss';
diff --git a/packages/dnb-eufemia/src/components/lib.ts b/packages/dnb-eufemia/src/components/lib.ts
index 90f2af014e3..a83caf8e752 100644
--- a/packages/dnb-eufemia/src/components/lib.ts
+++ b/packages/dnb-eufemia/src/components/lib.ts
@@ -17,6 +17,7 @@ import Avatar from './avatar/Avatar'
 import Badge from './badge/Badge'
 import Breadcrumb from './breadcrumb/Breadcrumb'
 import Button from './button/Button'
+import Card from './card/Card'
 import Checkbox from './checkbox/Checkbox'
 import DatePicker from './date-picker/DatePicker'
 import Dialog from './dialog/Dialog'
@@ -69,6 +70,7 @@ export {
   Badge,
   Breadcrumb,
   Button,
+  Card,
   Checkbox,
   DatePicker,
   Dialog,
@@ -122,6 +124,7 @@ export const getComponents = () => {
     Badge,
     Breadcrumb,
     Button,
+    Card,
     Checkbox,
     DatePicker,
     Dialog,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss
index 9950b839a25..fd3f0473ec0 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss
@@ -6,7 +6,7 @@
     }
   }
 
-  &:has(+ .dnb-layout-stack > .dnb-layout-card, + .dnb-layout-card) {
+  &:has(+ .dnb-layout-stack > .dnb-card, + .dnb-card) {
     &:not([class*='space__left']) {
       margin-left: var(--spacing-medium);
     }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss
index 7f004881fc5..c7e6b583d34 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss
@@ -6,7 +6,7 @@
     }
   }
 
-  &:has(+ .dnb-layout-stack > .dnb-layout-card, + .dnb-layout-card) {
+  &:has(+ .dnb-layout-stack > .dnb-card, + .dnb-card) {
     &:not([class*='space__bottom']) {
       margin-bottom: var(--spacing-small);
     }
diff --git a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/style/dnb-steps-layout.scss b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/style/dnb-steps-layout.scss
index 0ff8628b9d9..bd3ef4b066e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/StepsLayout/style/dnb-steps-layout.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/StepsLayout/style/dnb-steps-layout.scss
@@ -28,7 +28,7 @@
     min-width: 25rem;
   }
 
-  &__contents .dnb-layout-card {
+  &__contents .dnb-card {
     --border-color: var(--color-pistachio);
   }
 }
diff --git a/packages/dnb-eufemia/src/index.ts b/packages/dnb-eufemia/src/index.ts
index a99cadb9488..496477dab37 100644
--- a/packages/dnb-eufemia/src/index.ts
+++ b/packages/dnb-eufemia/src/index.ts
@@ -44,6 +44,7 @@ import Avatar from './components/avatar/Avatar'
 import Badge from './components/badge/Badge'
 import Breadcrumb from './components/breadcrumb/Breadcrumb'
 import Button from './components/button/Button'
+import Card from './components/card/Card'
 import Checkbox from './components/checkbox/Checkbox'
 import DatePicker from './components/date-picker/DatePicker'
 import Dialog from './components/dialog/Dialog'
@@ -123,6 +124,7 @@ export {
   Badge,
   Breadcrumb,
   Button,
+  Card,
   Checkbox,
   DatePicker,
   Dialog,
diff --git a/packages/dnb-eufemia/src/style/dnb-ui-components.scss b/packages/dnb-eufemia/src/style/dnb-ui-components.scss
index dfd4c49b6cf..519df1cb031 100644
--- a/packages/dnb-eufemia/src/style/dnb-ui-components.scss
+++ b/packages/dnb-eufemia/src/style/dnb-ui-components.scss
@@ -13,6 +13,7 @@
 @import '../components/badge/style/dnb-badge.scss';
 @import '../components/breadcrumb/style/dnb-breadcrumb.scss';
 @import '../components/button/style/dnb-button.scss';
+@import '../components/card/style/dnb-card.scss';
 @import '../components/checkbox/style/dnb-checkbox.scss';
 @import '../components/date-picker/style/dnb-date-picker.scss';
 @import '../components/dialog/style/dnb-dialog.scss';