14.3.0 [Current] 13.3.1 [Past] 12.7.4 [Past]

Card

import Card from '@concur/nui-widgets/lib/Cards/Card';

Cards are customizable content containers that group related information (e.g. expense reports, invoices, apps, etc.) in a flexible-sized container visually resembling a playing card. Cards are best suited for cases when users browse for information, rather than search. Cards must be contained within a CardDeck. Sizing of cards is controlled by the CardDeck.

Examples

Types

The different types of cards refer to the styling on the header for each card. Use the type property to define the desired type.

<CardDeck>
    <Card
        footer='Footer'
        header='Default'
        onClick={() => {}}>
        Card 1
    </Card>
    <Card
        footer='Footer'
        header='Success'
        onClick={() => {}}
        type='success'>
        Card 2
    </Card>
    <Card
        footer='Footer'
        header='Danger'
        onClick={() => {}}
        type='danger'>
        Card 3
    </Card>
    <Card
        footer='Footer'
        header='Info'
        onClick={() => {}}
        type='info'>
        Card 4
    </Card>
</CardDeck>

Clickable vs. Not Clickable

Clickable cards allow users to click anywhere on the card to view additional details. Because of this, the card itself will receive focus, so they cannot contain additional interactive elements (e.g. fields, buttons, links). They will display a drop shadow and hover state by default. Non-clickable cards should contain interactive elements that will each receive focus. Use the onClick property to define a callback function and to make a card clickable.

<CardDeck>
    <Card className='text-center' onClick={() => {}}>Card Clickable</Card>
    <Card className='text-center'>
        <p>
            Card Not Clickable
        </p>
        <div>
            <Button>Click me</Button>
        </div>
    </Card>
</CardDeck>

Usage

Properties

Callbacks