Skip to content
Home

Card

Info
Demos
Properties

Import

import { Card } from '@dnb/eufemia'

Description

Card is a block section element showing the white box with rounded gray borders, adding spacing automatically.

It uses Flex.Item under the hood. When one of these properties were given, stack, direction or spacing – the Flex.Container will be used.

import { Card } from '@dnb/eufemia'
import { Form, Field } from '@dnb/eufemia/extensions/forms'


render(
  <Form.Handler data={existingData} onSubmit={submitHandler}>
    <Card>
      <Field.Email path="/dataPath" />
      <Form.ButtonRow>
        <Form.SubmitButton />
      </Form.ButtonRow>
    </Card>
  </Form.Handler>,
)

Accessibility

It uses a section element. Which allows you to add an aria-label or aria-labelledby to provide screen readers with landmarks.

Code Editor
<Card aria-labelledby="unique-id">
  <Form.SubHeading id="unique-id" space={0}>
    Heading
  </Form.SubHeading>
  <P>Content inside a landmark ...</P>
</Card>

Demo

Default border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus pharetra elit in bibendum.

Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus.

Code Editor
<Card>
  <P>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum.
  </P>
  <P>
    Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae
    metus.
  </P>
</Card>

Vertical fields

Code Editor
<Card>
  <Flex.Vertical>
    <Field.String label="Label" value="Value" />
    <Field.String label="Label" value="Value" />
  </Flex.Vertical>
</Card>

Horizontal fields

Code Editor
<Card>
  <Flex.Horizontal>
    <Field.String label="Label" value="Value" width="small" />
    <Field.String label="Label" value="Value" width="stretch" />
  </Flex.Horizontal>
</Card>

Stack

The Card components needs to have stack={true} or align="stretch" in order to stretch its children components.

For form components, you should use stack={true} to get the correct spacing.

Code Editor
<Card stack>
  <Field.String label="Label" value="Value" />
  <Field.String label="Label" value="Value" />
  <Hr />
  <Form.SubmitButton />
</Card>

Nested Cards

Nested cards have responsive={false} by default and will not behave responsive.

First Card

Second Card

Third Card (for edge cases only)

Code Editor
<Card>
  <P>First Card</P>
  <Card top>
    <P>Second Card</P>
    <Card top>
      <P>Third Card (for edge cases only)</P>
    </Card>
  </Card>
</Card>

Without padding

no inner space

Code Editor
<Card innerSpace={false} align="stretch">
  <P>no inner space</P>
</Card>

With nested Section

The Card components needs to have stack={true} or align="stretch" in order to stretch its children components.

Card with a nested Section

no inner space

no inner space

Code Editor
<Flex.Stack>
  <Card gap="x-small" align="stretch">
    <Form.SubHeading>Card with a nested Section</Form.SubHeading>
    <Section
      variant="info"
      innerSpace={{
        top: 'small',
        bottom: 'medium',
      }}
    >
      <Field.String width="medium" label="In nested Section" />
    </Section>
  </Card>

  <Card innerSpace="x-large" stack>
    <Section
      variant="info"
      innerSpace={{
        top: 'small',
        bottom: 'medium',
      }}
    >
      <Field.String
        width="medium"
        label="Card with a 'x-large' inner space"
      />
    </Section>
  </Card>

  <Card innerSpace={false} align="stretch">
    <P>no inner space</P>
    <Section innerSpace backgroundColor="var(--card-outline-color)">
      <Field.String width="medium" label="Card with no inner space" />
    </Section>
    <P>no inner space</P>
  </Card>
</Flex.Stack>

With Table

Card title
Column 1Column 2Column 3
Row 1Row 1Row 1
Row 3Row 3Row 3
Code Editor
const MyTable = () => (
  <Table.ScrollView>
    <Table border outline size="medium">
      <thead>
        <Tr noWrap>
          <Th>Column 1</Th>
          <Th>Column 2</Th>
          <Th>Column 3</Th>
        </Tr>
      </thead>
      <tbody>
        <Tr>
          <Td>Row 1</Td>
          <Td>Row 1</Td>
          <Td>Row 1</Td>
        </Tr>
        <Tr>
          <Td colSpan={3} align="right">
            <Button>Button</Button>
          </Td>
        </Tr>
        <Tr>
          <Td>Row 3</Td>
          <Td>Row 3</Td>
          <Td>Row 3</Td>
        </Tr>
      </tbody>
    </Table>
  </Table.ScrollView>
)
render(
  <Card title="Card title" responsive={false} innerSpace={0} filled>
    <MyTable />
  </Card>,
)

With Grid

Grid wraps the Cards nicely on smaller screens.

Heading

Text

Heading

Pariatur officia sit adipisicing pariatur commodo enim do quis

Heading

Text

Code Editor
<Grid.Container
  columns={{
    small: 1,
    medium: 3,
    large: 3,
  }}
  columnGap="small"
>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Pariatur officia sit adipisicing pariatur commodo enim do quis</P>
  </Card>
  <Card stack>
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
</Grid.Container>

With Flex

While Flex has the horizontal direction, it uses rowGap when wrapping. So it's the container spacing the Cards then. This is not ideal, because the Cards should ideally have no gap, like in the Grid example above.

Heading

Text

Heading

Pariatur officia sit adipisicing pariatur commodo enim do quis

Heading

Text

Code Editor
<Flex.Container>
  <Card
    size={{
      small: 'auto',
      medium: 4,
      large: 4,
    }}
    stack
  >
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
  <Card
    size={{
      small: 'auto',
      medium: 4,
      large: 4,
    }}
    stack
  >
    <H2>Heading</H2>
    <P>Pariatur officia sit adipisicing pariatur commodo enim do quis</P>
  </Card>
  <Card
    size={{
      small: 'auto',
      medium: 4,
      large: 4,
    }}
    stack
  >
    <H2>Heading</H2>
    <P>Text</P>
  </Card>
</Flex.Container>