Card

Overview

This is a basic card component that governs the visual style of a card, agnostic of any of its children.

Subcomponents

A Card has one optional subcomponent:

• CardFooter - a container for a group of items at the end of a card (such as a button)

Examples

Basic Usage

The default card without any props set. It defaults to a white background with small, fixed padding.

Background Colors

In this iteration of cards, there are just two background options: neutral-0 (white) and neutral-100 (light gray).

Border & Shadow

Cards can have a border and/or a shadow. Design recommends using these styles on white-background cards on light backgrounds only.

Padding

Cards can have two types of padding: responsive or fixed. Fixed padding means the padding stays the same value regardless of screen size, whereas responsive padding adapts to a different value depending on screen size. Default is paddingType set to fixed and paddingSize set to sm.

Fixed Padding

paddingSize defaults to sm, and md and lg options are also available.

Responsive Padding

paddingSize defaults to sm, and sm is the only option available when paddingType set to responsive.

Match Height

Use this prop to make cards match the height of their neighbors when a difference in content would cause one to be taller or shorter than its neighbors. Requires a parent component containing multiple cards using grid css, like the <GridList> block.

Without matchHeight

With matchHeight

Card Numbers

We can pass numbers to cards, such as in an ordered list of cards.

In the example below, we are passing the number manually into numberIndex. numberIndex uses base 0, so to show "1" the prop value would be 0, etc. Typically, in a real project, these index numbers would get assigned by mapping over a list of cards and passing the current index to the numberIndex prop.

Props

Import

import { Card, CardFooter } from '@im/integral/components/styled';

Design Details and More to Come

Design specs call for an interactive version of the ENTIRE card (make the card focusable and give it hover effects), but implementation has been pushed back until a less urgent time. Mostly a mechanism for introducing whimsy (animated hover states), and should only be used of an entire card has a single action. If a card has multiple different actions within it's children, it is not recommended to make whole card be interactive.

Current specs outline that border and shadow are only for the neutral-0 variant. There is world where this could change as new designs come out.

This implementation is missing additional semantic structure that you can achieve with the ShadCN Card Component. Due to the nature of card content being content dependent, implementating an actual card may look like setting up "styled" subcomponents to be consumed as needed. (Quotations because these subcomponents serve a semantic purpose and will unlikely need default styling). That could look like:

// a card with some card props and a custom class or tailwind for content layout
<Card border className="integral-card--layout-style-1 grid grid-cols-2">

  // a subcomponent with custom css or tailwind applied
  <CardHeader className="integral-card-header--card-style-1 bg-red-50">

    // content specific html/jsx
    <HeadingTitle level='2' size='xs'>My custom heading</HeadingTitle>

    // nested card subcomponents
    <CardActions>

      // content specific html/jsx
      <Link href="/edit">Edit</Link>

    </CardActions>
  
  </CardHeader>

  ...

</Card>