## Usage

Cards are used to group related information and actions in a consistently styled container.

A common use case of cards is in a grid of items that presents some but not all the data connected to each item; such as news articles, or as in the contrived example below, a user's connected organisations.

```tsx live
const CardExample = ({ organisationName }: { organisationName: string }) => (
  <Card>
    <CardHeader divider>
      <Flex flex={1} justifyContent="space-between" alignItems="center" gap="small">
        <Heading level={5}>{organisationName}</Heading>
        <Button iconOnly icon={OverflowHorizontalIcon} label="More actions" tone="neutral" size="small" />
      </Flex>
    </CardHeader>

    <CardBody>
      <Flex flexDirection="column" gap="small" flex={1}>
        <Flex flexDirection="column">
          <Text fontSize="xsmall" color="neutralSubtle">
            Connection name
          </Text>
          <Text fontSize="small" className={css({ textTransform: 'uppercase' })}>
            Xero Acme Australia
          </Text>
        </Flex>

        <Flex flexDirection="column">
          <Text fontSize="xsmall" color="neutralSubtle">
            Last config update
          </Text>
          <Text fontSize="small">9/11/2023 3:30 pm</Text>
        </Flex>

        <Flex flexDirection="column">
          <Text fontSize="xsmall" color="neutralSubtle">
            Updated by
          </Text>
          <Text fontSize="small">ELMO Admin on 2/9/2023 4:23 pm</Text>
        </Flex>
      </Flex>
    </CardBody>

    <CardFooter>
      <ButtonLink size="small" href="#" tone="neutral" label="View Dashboard" icon={DashboardIcon} />
    </CardFooter>
  </Card>
);

return (
  <Grid gridTemplateColumns={{ xsmall: '100%', large: '1fr 1fr' }} gap="medium">
    <CardExample organisationName="ACME Corp AU" />
    <CardExample organisationName="ACME Trust AU" />
  </Grid>
);
```

## Concept

The `@eds/card` package provides a set of primitive components to help compose cards in a flexible but consistent way.

- `<Card />`: A flexbox container that provides opinionated border and background styles. Supports [hiding the border](#hide-border) and [other props](#other-props).
- `<CardHeader />`: A flexbox container to be used as the first child inside the Card component. Supports [spacing](#spacing) and [divider](#divider).
- `<CardBody />`: A flexbox container to be used as the only or second child inside the Card component. Supports [spacing](#spacing).
- `<CardFooter />`: A flexbox container to be used as the last child inside the Card component. Supports [spacing](#spacing) and [divider](#divider).

NOTE: It's recommended to always use a CardBody inside the Card, even if other child components aren't needed for your use case.

```tsx live open
<Card>
  <CardHeader>CardHeader</CardHeader>
  <CardBody>CardBody</CardBody>
  <CardFooter>CardFooter</CardFooter>
</Card>
```

## Hide border

By default, the Card component comes with a solid border around the container. Use the `hideBorder` prop when the card is placed on a darker background.

```tsx live
const [hideBorder, setHideBorder] = useState(true);

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <Toggle size="small" toggled={hideBorder} onClick={setHideBorder} label="hideBorder" />
    </PlaygroundCard>

    <Flex flexDirection="column" padding="large" backgroundColor="neutralBold" borderRadius="large">
      <Card hideBorder={hideBorder}>
        <CardHeader divider>
          <Flex flex={1} justifyContent="space-between" alignItems="center" gap="small">
            <Heading level={5}>ACME Corp AU</Heading>
            <Button iconOnly icon={OverflowHorizontalIcon} label="More actions" tone="neutral" size="small" />
          </Flex>
        </CardHeader>

        <CardBody>
          <Flex flexDirection="column" gap="small">
            <Flex flexDirection="column">
              <Text fontSize="xsmall" color="neutralSubtle">
                Connection name
              </Text>
              <Text fontSize="small" className={css({ textTransform: 'uppercase' })}>
                Xero Acme Australia
              </Text>
            </Flex>

            <Flex flexDirection="column">
              <Text fontSize="xsmall" color="neutralSubtle">
                Last config update
              </Text>
              <Text fontSize="small">9/11/2023 3:30 pm</Text>
            </Flex>

            <Flex flexDirection="column">
              <Text fontSize="xsmall" color="neutralSubtle">
                Updated by
              </Text>
              <Text fontSize="small">ELMO Admin on 2/9/2023 4:23 pm</Text>
            </Flex>
          </Flex>
        </CardBody>

        <CardFooter>
          <ButtonLink size="small" href="#" tone="neutral" label="View Dashboard" icon={DashboardIcon} />
        </CardFooter>
      </Card>
    </Flex>
  </Flex>
);
```

## Divider

Use the `divider` prop on the CardHeader and CardFooter components respectively, to visually separate them from the CardBody's content.

```tsx live
const [cardHeaderDivider, setCardHeaderDivider] = useState(true);
const [cardFooterDivider, setCardFooterDivider] = useState(true);

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <Flex flexWrap="wrap" gap="medium">
        <Toggle size="small" toggled={cardHeaderDivider} onClick={setCardHeaderDivider} label="CardHeader divider" />
        <Toggle size="small" toggled={cardFooterDivider} onClick={setCardFooterDivider} label="CardFooter divider" />
      </Flex>
    </PlaygroundCard>

    <Card>
      <CardHeader divider={cardHeaderDivider}>
        <Flex flex={1} justifyContent="space-between" alignItems="center" gap="small">
          <Heading level={4}>Learning Essentials Webinar</Heading>
          <Badge label="In progress" tone="caution" />
        </Flex>
      </CardHeader>

      <CardBody>
        <Flex flexDirection="column" gap="medium">
          <Text>
            This course has been designed to provide administrators with an overview of the essential features for ELMO
            Learning. ELMO Learning provides you with the ability to create, track, report and deliver courses through
            ELMO's cloud-based system.
          </Text>

          <Text>This webinar covers the following topics:</Text>

          <ul className={css({ margin: 0 })}>
            <Text as="li">Creating a course;</Text>
            <Text as="li">Course activities;</Text>
            <Text as="li">Enrolment management.</Text>
          </ul>
        </Flex>
      </CardBody>

      <CardFooter divider={cardFooterDivider}>
        <Button tone="neutral" label="Book session" icon={CalendarIcon} />
      </CardFooter>
    </Card>
  </Flex>
);
```

## Layout

Use the `layout` prop in the Card component to control the layout direction of the card elements - either `vertical` or `horizontal`.

This automatically updates the use of dividers in CardHeader, CardBody, and CardFooter.

```tsx live
const [withDivider, setWithDivider] = useState(true);
const [layout, setLayout] = useState<'horizontal' | 'vertical'>('horizontal');

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <Flex flexWrap="wrap" gap="medium">
        <Toggle size="small" toggled={withDivider} onClick={setWithDivider} label="With Dividers" />
        <Toggle
          size="small"
          toggled={layout === 'horizontal'}
          onClick={(val) => setLayout(val ? 'horizontal' : 'vertical')}
          label="Layout Horizontal"
        />
      </Flex>
    </PlaygroundCard>

    <Card maxWidth="24rem" layout={layout}>
      <CardHeader spacing="none" divider={withDivider}>
        <Flex
          width={layout === 'horizontal' ? '130px' : '100%'}
          alignItems="center"
          justifyContent="center"
          backgroundColor="informativeSubtle"
        >
          <CalendarSpot />
        </Flex>
      </CardHeader>

      <CardBody>
        <Flex flexDirection="column" gap="xxsmall" width="100%">
          <Text fontWeight="medium">ELMO Academy</Text>
          <Text fontSize="small" color="neutralSubtle">
            Lorem ipsum dolor sit amet consectetur. Vitae faucibus eget porta purator aliquet.
          </Text>
        </Flex>
      </CardBody>
    </Card>
    <Card
      layout={layout}
      // NOTE: We're using align-items: stretch rather than center to maintain full-height dividers.
      alignItems={layout === 'vertical' ? 'normal' : 'stretch'}
    >
      <CardHeader spacing="small" divider={withDivider}>
        <Flex alignItems="center">
          <Heading level={5}>ACME dev</Heading>
        </Flex>
      </CardHeader>

      <CardBody>
        <Flex flexDirection="column">
          <Text fontSize="xsmall" color="neutralSubtle">
            Connection name
          </Text>
          <Text fontSize="small" className={css({ textTransform: 'uppercase' })}>
            Xero Acme Australia
          </Text>
        </Flex>
      </CardBody>
      <CardFooter divider={withDivider}>
        <ButtonLink size="small" href="#" tone="neutral" label="View" icon={DashboardIcon} />
      </CardFooter>
    </Card>
  </Flex>
);
```

## Responsive Layout

Card layout also supports the [responsive prop syntax](/foundations/responsive-layouts#responsive-prop-syntax) on most props. Try resizing your viewport to see the effects:

```tsx live
const [withDivider, setWithDivider] = useState(true);
const [layout, setLayout] = useState<'horizontal' | 'vertical'>('horizontal');

return (
  <Flex flexDirection="column" gap="medium">
    <Card
      layout={{
        xsmall: 'vertical',
        large: 'horizontal',
      }}
      alignItems={{
        medium: 'normal',
        large: 'stretch',
      }}
    >
      <CardHeader spacing="small" divider={withDivider}>
        <Flex alignItems="center">
          <Heading level={5}>ACME dev</Heading>
        </Flex>
      </CardHeader>

      <CardBody>
        <Flex flexDirection="column">
          <Text fontSize="xsmall" color="neutralSubtle">
            Connection name
          </Text>
          <Text fontSize="small" className={css({ textTransform: 'uppercase' })}>
            Xero Acme Australia
          </Text>
        </Flex>
      </CardBody>
      <CardFooter divider={withDivider}>
        <ButtonLink size="small" href="#" tone="neutral" label="View" icon={DashboardIcon} />
      </CardFooter>
    </Card>
  </Flex>
);
```

## Spacing

Use the `spacing` prop in the CardHeader, CardBody and CardFooter components to control the spacing around the contents of the element.

There are four options for spacing; `large`, `medium` (default), `small` and `none`. Use large or medium spacing for larger cards, and small spacing for smaller cards.

```tsx live
type SpacingType = 'large' | 'medium' | 'small' | 'none';
const [spacing, setSpacing] = useState<SpacingType>('medium');

return (
  <Flex flexDirection="column" gap="medium">
    <PlaygroundCard>
      <RadioGroup
        size="small"
        horizontal
        keepSpaceForMessage={false}
        value={spacing}
        onInputChange={(selectedSpacing) => setSpacing(selectedSpacing as SpacingType)}
      >
        <Radio value="large">Large</Radio>
        <Radio value="medium">Medium (default)</Radio>
        <Radio value="small">Small</Radio>
        <Radio value="none">None</Radio>
      </RadioGroup>
    </PlaygroundCard>

    <Card>
      <CardHeader spacing={spacing} divider>
        <Flex flex={1} justifyContent="space-between" alignItems="center" gap="small">
          <Heading level={5}>ACME Corp AU</Heading>
          <Button iconOnly icon={OverflowHorizontalIcon} label="More actions" tone="neutral" size="small" />
        </Flex>
      </CardHeader>

      <CardBody spacing={spacing}>
        <Flex flexDirection="column" gap="small" flex={1}>
          <Flex flexDirection="column">
            <Text fontSize="xsmall" color="neutralSubtle">
              Connection name
            </Text>
            <Text fontSize="small" className={css({ textTransform: 'uppercase' })}>
              Xero Acme Australia
            </Text>
          </Flex>

          <Flex flexDirection="column">
            <Text fontSize="xsmall" color="neutralSubtle">
              Last config update
            </Text>
            <Text fontSize="small">9/11/2023 3:30 pm</Text>
          </Flex>

          <Flex flexDirection="column">
            <Text fontSize="xsmall" color="neutralSubtle">
              Updated by
            </Text>
            <Text fontSize="small">ELMO Admin on 2/9/2023 4:23 pm</Text>
          </Flex>
        </Flex>
      </CardBody>

      <CardFooter spacing={spacing}>
        <ButtonLink size="small" href="#" tone="neutral" label="View Dashboard" icon={DashboardIcon} />
      </CardFooter>
    </Card>
  </Flex>
);
```

The `none` spacing is ideal when incorporating elements that need to span the full width from the left to the right edge, such as images:

```tsx live
<Card maxWidth="24rem">
  {/** `spacing="none"` to make image width fill out to edges.` */}
  <CardHeader spacing="none">
    <Box as="img" src="/images/card-spacing-none-example-elmo-academy.png" width="100%" alt="" />
  </CardHeader>

  <CardBody>
    <Flex flexDirection="column" gap="xxsmall">
      <Text fontWeight="medium">ELMO Academy</Text>
      <Text fontSize="small" color="neutralSubtle">
        Lorem ipsum dolor sit amet consectetur. Vitae faucibus eget porta purator aliquet.
      </Text>
    </Flex>
  </CardBody>

  <CardFooter>
    <ButtonLink size="small" href="#" tone="neutral" label="Visit ELMO Academy" icon={ExternalLinkIcon} />
  </CardFooter>
</Card>
```

## Other props

The `<Card />` component supports all of the FlexProps, except:

- `flexDirection`
- `backgroundColor`
- `borderRadius`
- `overflow`
- `borderColor`
- `borderStyle`
- `borderWidth`

See [props](/packages/card/props/) for a full list of available props.

A styled container that groups related content and actions.

Card

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources