Skip to content
Home

Card

Info
Demos
Properties

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 props were given, stack, direction or spacing – the Flex.Container will be used.

BETA: The design is not 100% finalised and may change to be officially approved by UX through an RFC.

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

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