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

CardDeck

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

A CardDeck is a container holding a collection of ‘Cards’ that represent similar types of information (e.g. expense reports, invoices, apps, etc.). All cards contained in a card deck will be the same size and a card deck should only contain one CardCreate component.

Examples

Alignment

Use the alignment property to define the layout of cards within a card deck. Left-aligned and centered card decks will retain the standard spacing between cards, whereas justified card decks may increase spacing between cards to span the full width of the card deck container.

<CardDeck>
    <CardCreate onClick={() => {}} title='Create New Card' />
    <Card onClick={() => {}}>Card 1</Card>
    <Card onClick={() => {}}>Card 2</Card>
</CardDeck>

<CardDeck alignment='justify'>
    <CardCreate onClick={() => {}} title='Create New Card' />
    <Card onClick={() => {}}>Card 1</Card>
    <Card onClick={() => {}}>Card 2</Card>
</CardDeck>

<CardDeck alignment='center'>
    <CardCreate onClick={() => {}} title='Create New Card' />
    <Card onClick={() => {}}>Card 1</Card>
    <Card onClick={() => {}}>Card 2</Card>
</CardDeck>

Custom Size

The default size of a card is 268 pixels wide by 214 pixels high. This fits four cards on each row on a full-width container on a large viewport. Consumers can define a custom card size by using cardWidth and cardHeight properties.

<CardDeck cardHeight='250px' cardWidth='150px'>
    <CardCreate onClick={() => {}} title='Create New Card' />
    <Card onClick={() => {}}>Card 1</Card>
    <Card onClick={() => {}}>Card 2</Card>
</CardDeck>

Usage

Properties