Skip to content
Home

InfoCard

Info
Demos
Properties
Events

Import

import { InfoCard } from '@dnb/eufemia'

Description

The InfoCard is used to give the user more information than we can give in a FormStatus (message box). It can also be used to give useful tips.

The text content is set to a max width of 70 characters to ensure an optimal UU recommended reading lengths.

Demos

InfoCard (default)

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard text="This is a description of some information or a tip that will inform the user of something that will help them." />

InfoCard with a title

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
/>

InfoCard with a stretched container

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  stretch
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
/>

InfoCard with Buttons

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  closeButtonText="Close"
  onClose={() => {
    console.log('onClose')
  }}
  acceptButtonText="Accept"
  onAccept={() => {
    console.log('onAccept')
  }}
/>

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  centered
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  closeButtonText="Close"
  onClose={() => {
    console.log('onClose')
  }}
  acceptButtonText="Accept"
  onAccept={() => {
    console.log('onAccept')
  }}
/>

Each button can be used independently.

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  acceptButtonText="Accept"
  onAccept={() => {
    console.log('onAccept')
  }}
/>

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  closeButtonText="Close"
  onClose={() => {
    console.log('onClose')
  }}
/>

InfoCard accepts a custom icon

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  icon={Card}
/>

InfoCard centered content

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  centered={true}
/>

InfoCard without drop shadow

Title of your info/tip

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="Title of your info/tip"
  dropShadow={false}
/>

InfoCard custom image

Profile picture

This is the InfoCard with a custom image

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="This is the InfoCard with a custom image"
  src="/images/avatars/1501870.jpg"
  alt="Profile picture"
/>

InfoCard custom image centered

Profile picture

This is the InfoCard with a custom image

This is a description of some information or a tip that will inform the user of something that will help them.

Code Editor
<InfoCard
  text="This is a description of some information or a tip that will inform the user of something that will help them."
  title="This is the InfoCard with a custom image"
  centered={true}
  src="/images/avatars/1501870.jpg"
  alt="Profile picture"
/>

InfoCard with children

Title of your info/tip

I want to inform you about the following items:

  • Item 1
  • Item 2

Is this okay with you?

Code Editor
<InfoCard
  title="Title of your info/tip"
  acceptButtonText="Accept"
  onAccept={() => {
    console.log('onAccept')
  }}
>
  <P>I want to inform you about the following items:</P>
  <Ul>
    <Li>Item 1</Li>
    <Li>Item 2</Li>
  </Ul>
  <P>Is this okay with you?</P>
</InfoCard>