Card | New Relic Developers

Draws a flexible and extensible content container.

Usage

import { Card } from 'nr1'

Examples

Basic

<Card>
  <CardHeader title="Card title" subtitle="This is a subtitle" />
  <CardBody>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </CardBody>
</Card>;

1
<Card>
2
  <CardHeader title="Card title" subtitle="This is a subtitle" />
3
  <CardBody>
4
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
5
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
6
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
7
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
8
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
9
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10
  </CardBody>
11
</Card>;

ReferenceError: Card is not defined

Props

childrenrequirednode

Content to render inside the card.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

spacingTypeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of<One ofCard.SPACING_TYPE.EXTRA_LARGE,
Card.SPACING_TYPE.LARGE,
Card.SPACING_TYPE.MEDIUM,
Card.SPACING_TYPE.NONE,
Card.SPACING_TYPE.OMIT,
Card.SPACING_TYPE.SMALL,
>
>

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

Methods

`Card.render`

function () => undefined