---
title: Form.Card
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.584Z
checksum: 4598fa3ab83ef06b2ac7cc4f4ed7b72b489bd01c7fd0475de9bf2bf1c35f562a
---

# Form.Card

## Import

```tsx
import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.Card />)
```

## Description

`Form.Card` is a wrapper for the [Card](/web/components/card/) component to make it easier to use inside a form:

- It will set `stack` to `true` by default (instead of `false`).

But in all other ways, it works just like the [Card](/web/components/card/) component.


## Demos


```tsx
render(<Flex.Stack>
        <Form.MainHeading>Main heading</Form.MainHeading>
        <Form.Card>
          <Field.String label="Field A" required />
          <Field.String label="Field B" required />
          <Form.Card>
            <P>Nested card</P>
          </Form.Card>
        </Form.Card>
        <Form.SubmitButton />
      </Flex.Stack>)
```



  
```tsx
render(<Form.Handler>
        <Wizard.Container>
          <Wizard.Step>
            <Form.Card>
              <Form.Section>
                <Form.Section.ViewContainer title="In a Wizard" variant="basic">
                  <Value.String defaultValue="Something" />
                </Form.Section.ViewContainer>
                <Form.Section.EditContainer variant="basic">
                  <Field.String defaultValue="Something" />
                </Form.Section.EditContainer>
              </Form.Section>
            </Form.Card>
            <Form.SubmitButton text="Happy coding!" />
          </Wizard.Step>
        </Wizard.Container>
      </Form.Handler>)
```

<!-- eufemia-properties-usage:start -->
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
<!-- eufemia-properties-usage:end -->

## Properties


```json
{
  "props": {
    "stack": {
      "doc": "True to stack the sub components with space between. Same as `stack` in [Card](/web/components/card/properties). But defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    }
  },
  "usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```


## Other properties inherited from [Card](/web/components/card/properties)


```json
{
  "props": {
    "layoutEngine": {
      "doc": "Select the internal Flex layout engine. Defaults to `legacy` for backwards compatibility. Use `css` to opt in to native CSS gap.",
      "type": [
        "\"css\"",
        "\"legacy\""
      ],
      "defaultValue": "'legacy'",
      "status": "optional"
    },
    "outset": {
      "doc": "Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.",
      "type": "boolean",
      "status": "optional"
    },
    "direction": {
      "doc": "Direction of sub components. Can be: `horizontal` or `vertical`. Defaults to `vertical`.",
      "type": [
        "\"horizontal\"",
        "\"vertical\""
      ],
      "status": "optional"
    },
    "gap": {
      "doc": "How much space between the sub components. Use `false` for no space. Defaults to `false`, or `medium` when `stack` is set.",
      "type": [
        "\"xx-small\"",
        "\"x-small\"",
        "\"small\"",
        "\"medium\"",
        "\"large\"",
        "\"x-large\"",
        "\"xx-large\"",
        "false"
      ],
      "status": "optional"
    },
    "alignSelf": {
      "doc": "Align the Card itself when it is a flex item in an outer container (CSS `align-self`). Defaults to `stretch`.",
      "type": [
        "\"flex-start\"",
        "\"flex-end\"",
        "\"center\"",
        "\"baseline\"",
        "\"stretch\""
      ],
      "status": "optional"
    },
    "title": {
      "doc": "Define a title that appears on top of the Card.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "responsive": {
      "doc": "Define if the card should behave responsive. Defaults to `true`.",
      "type": "boolean",
      "status": "optional"
    },
    "filled": {
      "doc": "Define if the Card should get the same background color as the outline border.",
      "type": "boolean",
      "status": "optional"
    },
    "outline": {
      "doc": "Define the outline color. Defaults to `var(--card-outline-color)`.",
      "type": "string",
      "status": "optional"
    },
    "outlineWidth": {
      "doc": "Define the outline width. Defaults to `var(--card-outline-width)` (`0.0625rem`).",
      "type": [
        "string",
        "number"
      ],
      "status": "optional"
    },
    "dropShadow": {
      "doc": "Define if the Card should have drop shadow. Uses Section `dropShadow`.",
      "type": "boolean",
      "status": "optional"
    },
    "backgroundColor": {
      "doc": "Define the background color. Defaults to `var(--card-background-color)`.",
      "type": "string",
      "status": "optional"
    },
    "element": {
      "doc": "Define the type of element. Defaults to `section`.",
      "type": "React.Element",
      "status": "optional"
    },
    "children": {
      "doc": "Contents.",
      "type": "React.ReactNode",
      "status": "required"
    },
    "[Flex.Container](/web/layout-and-typography/layout/flex/container/properties)": {
      "doc": "Flex.Container properties.",
      "type": "Various",
      "status": "optional"
    },
    "[Flex.Item](/web/layout-and-typography/layout/flex/item/properties)": {
      "doc": "Flex.Item properties.",
      "type": "Various",
      "status": "optional"
    },
    "[Space](/web/layout-and-typography/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```