Card#

Import#

import { Card } from '@dnb/eufemia'

The controls and media overlay are available as Card.Info.CloseButton, Card.Info.MediaButton, and Card.Info.Overlay. No additional imports are needed.

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.

Relevant links#

• Figma
• Source code
• Docs code

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.

Card.List and Card.ListItem#

Use Card.List and Card.ListItem to render a semantic <ul> / <li> list of cards. Card.List provides a responsive flex layout with wrapping. Card.ListItem supports a center prop to center content vertically — set it to true to always center, or "when-small" to center only on small screens.

Security#

Like the Anchor, Card.Action removes href and to values that use a script-executing protocol (javascript: or vbscript:), including obfuscated variants such as java\tscript:. This prevents cross-site scripting (XSS) when untrusted input is passed to these properties; the card then renders without a link target. Other protocols, such as data: and blob:, are left untouched.

Card.Info#

Use Card.Info for information and tips. It is a complete Card with helpful defaults, so use it directly without an enclosing Card. Compose its children with headings, paragraphs, images, icons, Flex, and Buttons as needed.

<Card.Info>
  <Flex.Stack gap="x-small">
    <H2 size="small">Build your savings</H2>
    <P size="small">A little every month goes a long way.</P>
  </Flex.Stack>
  <Button variant="secondary" onClick={startSaving}>
    Start saving
  </Button>
</Card.Info>

Layout and surface#

Card.Info defaults to dropShadow={true}, responsive={false}, stack={true}, and gap="small". Its padding is small on small screens and medium on larger screens. It keeps rounded corners on small screens. Override any default using the regular Card properties.

Group a title and its text in Flex.Stack gap="x-small" for an 8px gap. Card.Info keeps its default 16px gap between that group and separate actions.

Width follows the containing layout. Constrain that layout when the card should be narrower. Use innerSpace to change padding, dropShadow={false} to remove the shadow, or responsive to use Card's edge-to-edge layout on small screens.

Content is supplied through children. Use Flex.Horizontal for a graphic beside text, or Flex.Stack align="center" with centered text for a centered layout. Use Provider skeleton for loading content. Card.Info has no separate graphic, text, icon, or button props. The optional title prop retains Card's title behavior; use a heading child when the page structure needs a semantic heading.

Images and video#

Compose media layouts with Card.Info and ordinary image or video elements. Its defaults provide shadow, rounded corners, and a stretched inner layout. Set innerSpace={0} for media that reaches the edges. Add padding around the content and clip media in an inner container so Card.Action's focus outline is preserved. Use Flex wrapping to stack media and content when the card itself becomes narrow.

Set href on Card.Info for a whole-card link with no nested controls. Omit whole-card actions when it contains independent links, a close button, or video controls.

Give meaningful images descriptive alternative text. Use alt="" for decorative artwork that adds no information beyond the text. Set image dimensions or an aspect ratio to reserve space before loading, and choose cropping that preserves important content.

For decorative video, keep all information in the text, mute the video, and hide it from assistive technology. Provide a keyboard-accessible play/pause control and a poster matching the first video frame. Respect prefers-reduced-motion: disable autoplay and pause playback when the preference is enabled, while allowing playback on request. Keep text readable against every frame with a sufficiently dark overlay. For video that conveys information, use native controls, captions, and an accessible transcript instead of hiding it or using it as a background.

See the image, centered image, and video compositions.

Interactive information cards#

Set href or to for a whole-card link, or onClick for a whole-card action. Card.Info uses Card.Action for hover, focus, and keyboard behavior. Pass a router Link through element when using to.

<Card.Info href="/savings">
  <Flex.Stack gap="x-small">
    <H2 size="small">Start saving</H2>
    <P size="small">Read about our savings accounts.</P>
  </Flex.Stack>
</Card.Info>

Do not place buttons, links, inputs, or a close button inside a whole-card action. When the content needs independent controls, omit href, to, and onClick on Card.Info and render those controls as children. Provide aria-label or aria-labelledby when a noninteractive card needs a named landmark.

Close button#

Compose Card.Info.CloseButton as a direct child of a noninteractive Card or Card.Info. The control provides a translated label, a circular background, and top-right positioning. Padded cards reserve space beside the content automatically. Cards with innerSpace={0} or innerSpace={false} keep media at full width and place the close control over it; add padding to text inside these cards to avoid overlap. Use its onClick to dismiss the card, and move focus to a suitable remaining control when removing focused content. Use HeightAnimation around Card.Info when dismissal should animate.

import { Card, P } from '@dnb/eufemia'

function SavingsTip({ onDismiss }) {
  return (
    <Card.Info>
      <Card.Info.CloseButton onClick={onDismiss} />
      <P>Save a little every month.</P>
    </Card.Info>
  )
}

Do not nest this control inside a whole-card link or action. See Card.Info.CloseButton properties.

The close control uses a 24px circular button, and the media control uses a 32px circle. Both have a 16px icon and an extended click/tap area of at least 44px. Use the Button size and bounding properties to customize these defaults.

See the information card demos.

Optional media control#

Use Card.Info.MediaButton and pass a stable ref attached to your video. Mount the video and control together. The control tracks native playback events, provides translated play/pause labels, and animates the standard icons with reduced-motion support. It resumes playback from the current position. If a render replaces the video element, the control removes the old listeners, tracks the new element, and reapplies playback preferences after the commit. Use playTitle and pauseTitle to customize the labels.

import { useRef } from 'react'
import { Card, Flex } from '@dnb/eufemia'

function DecorativeVideo() {
  const videoRef = useRef<HTMLVideoElement>(null)

  return (
    <Flex.Stack style={{ position: 'relative' }}>
      <video
        ref={videoRef}
        src="/video.mp4"
        poster="/poster.webp"
        muted
        loop
        playsInline
        aria-hidden="true"
        preload="none"
      />
      <Card.Info.MediaButton videoRef={videoRef} />
    </Flex.Stack>
  )
}

The control defaults to autoplay for muted video when the user does not prefer reduced motion. Enabling reduced motion pauses playback; manual playback is still available. Set autoPlay={false} to require a request before playback starts. If the browser blocks autoplay, the play button remains available. Keep the video's native autoPlay attribute off so it does not bypass this preference handling.

You own the video sources, poster, loading strategy, and error fallback. Use native controls and captions for informative video. See the video example and Card.Info.MediaButton properties.

Media content overlay#

Use Card.Info.Overlay for content over an image or decorative video. It provides responsive padding, a transparent-to-dark gradient, progressive backdrop blur, and dark-surface context for controls. Headings and paragraphs receive text shadows automatically, including inside nested layout components. Headings use a broader shadow than body text. Override textShadow on individual text elements when needed. The effects are decorative and do not hide the content from assistive technology or intercept pointer events.

<Card.Info.Overlay align="center" style={{ textAlign: 'center' }}>
  <H2>Spar til noe uventet</H2>
  <P>Du vet aldri når du trenger litt ekstra penger.</P>
  <Button href="/sparing">Start sparing</Button>
</Card.Info.Overlay>

Place the overlay inside the media container after the image or video. Control its vertical placement through spacing or inline styles, as in the video demo. Set blur={false} to keep only the gradient, or gradient={false} to keep only the blur. Check text contrast against every media frame, especially when disabling either effect. See Overlay properties.

Bundles#

Card.Info includes CloseButton, MediaButton, and Overlay as compound components. Importing Card retains these helpers and their playback and icon dependencies in a typical production bundle. Applications that do not import Card can still omit the entire component through ESM tree shaking.

Related components#

Card is part of the Content category. Other components for similar needs:

• Accordion — to let people open and close sections of related content.
• Avatar — to make a person, company, or profile easier to recognize.
• CountryFlag — to show a country by its flag from an ISO country code.
• DateFormat — to show dates in the correct DNB format.
• Heading — to create accessible page headings with the correct level.
• Icon — to render and size an icon in line with Eufemia styling.

See all in Content →

Demos#

Default border#

Stack#

When stack is set to true, the Card will add a gap between its children and stretch them to the full.

For form components, you should use Form.Card instead of the original Card component.

When stack is set to true, the Card will add a gap between its children and stretch them to the full.

With form fields#

When using Eufemia Forms, you may want to use Form.Card instead of the original Card component.

Nested Cards#

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

With drop shadow#

With outset#

When using outset, the Card will break out of the layout container. On small screens (mobile) the outset is removed.

Without padding#

With nested Section#

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

With Table#

With Grid#

Grid wraps the Cards nicely on smaller screens.

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.

With backgroundColor and outline#

Interactive Cards#

Use Card.Action to make a Card clickable or a link. Pass onClick for a button-like card, or href/to for a link card. Both variants get hover, focus, and keyboard styles automatically.

For custom routing (e.g. react-router), pass a router Link via the element prop on Card.Action.

Info card layout#

Use Card.Info directly for information and tips. Compose its content using existing components.

Info card actions#

Set onClick, href, or to on Card.Info when the whole card performs one action or navigates to a URL. Keep the content free of nested links, buttons, and other interactive elements.

Closable info card#

Compose Card.Info.CloseButton inside Card.Info and wrap the card in HeightAnimation to animate dismissal. HeightAnimation removes the card after the closing animation completes. In your application, move focus to a suitable remaining control when dismissing focused content.

Graphic and centered layouts#

Image beside content#

Set innerSpace={0} on Card.Info for edge-to-edge media and add padding around the content. Flex wraps the image above the text when the card becomes narrow, including inside a grid. Use descriptive alt text for meaningful images and alt="" for decorative images.

Spar til noe uventet

Du vet aldri når du trenger litt ekstra penger.

Start sparing

Code

Dark mode

Centered image card#

Set maxWidth directly on Card.Info and use Flex to center the content. Round the image's top corners without clipping the card, so keyboard focus outlines remain visible.

Spar til noe uventet

Du vet aldri når du trenger litt ekstra penger.

Start sparing

Code

Dark mode

Full media with video#

Use a muted background video for decoration and keep all information in the card's text. The video plays automatically unless the user prefers reduced motion. Enabling reduced motion pauses playback; the user can still choose to play it. The keyboard-accessible control toggles play and pause without resetting playback. Use the first video frame as the poster to avoid a visual jump when playback starts. A poster image and the call to action remain available if playback fails.

Replace the video and poster URLs with your own media. Card.Info.Overlay supplies the gradient, progressive blur, text shadows for headings and paragraphs, padding, and dark-surface context for its controls. Check text contrast across the full video. For video that conveys information, provide native controls, captions, and a transcript; see images and video.

Use Card.Info.MediaButton and pass the video ref. It handles playback state, reduced motion, translated labels, and the play/pause icon transition. Keep source, poster, and error fallback handling with the video.

The close control pauses playback, dismisses the card, and moves focus to this section's heading.

Spar til noe uventet

Du vet aldri når du trenger litt ekstra penger.

Start sparing

Code

Dark mode