LibreTexts IconDavis Design System

Card

Cards are containers that group related information and actions. The Davis Card component is composable with Header, Body, and Footer subcomponents.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Card } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Card>
      <Card.Header>
        <h2 className="text-xl font-semibold">Card Title</h2>
      </Card.Header>
      <Card.Body>
        <p>Card content goes here.</p>
      </Card.Body>
    </Card>
  );
}

Variants

Cards come in three visual variants.

<Card variant="default">
  <Card.Body>Default card with subtle shadow</Card.Body>
</Card>

<Card variant="elevated">
  <Card.Body>Elevated card with prominent shadow</Card.Body>
</Card>

<Card variant="outline">
  <Card.Body>Outlined card with border</Card.Body>
</Card>

Padding

Control the internal padding of the card.

<Card padding="none">
  <Card.Body>No padding</Card.Body>
</Card>

<Card padding="sm">
  <Card.Body>Small padding</Card.Body>
</Card>

<Card padding="md">
  <Card.Body>Medium padding (default)</Card.Body>
</Card>

<Card padding="lg">
  <Card.Body>Large padding</Card.Body>
</Card>

Add actions or metadata to the bottom of the card with Card.Footer.

import { Card, Button } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Card>
      <Card.Header>
        <h2 className="text-xl font-semibold">Confirm Action</h2>
      </Card.Header>
      <Card.Body>
        <p>Are you sure you want to proceed?</p>
      </Card.Body>
      <Card.Footer>
        <div className="flex gap-3 justify-end">
          <Button variant="ghost">Cancel</Button>
          <Button>Confirm</Button>
        </div>
      </Card.Footer>
    </Card>
  );
}

With Image

Add an image to the card header.

import { Card } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Card padding="none">
      <Card.Header
        image={{
          src: '/images/hero.jpg',
          alt: 'Mountain landscape',
          height: 200,
        }}
      />
      <div className="p-6">
        <Card.Body>
          <h3 className="text-lg font-semibold mb-2">Mountain View</h3>
          <p className="text-text-neutral">A beautiful mountain landscape.</p>
        </Card.Body>
      </div>
    </Card>
  );
}

Clickable Cards

Make cards interactive with onClick or href props.

import { Card } from '@libretexts/davis-react';

export default function Example() {
  return (
    <>
      {/* As button */}
      <Card onClick={() => alert('Card clicked!')}>
        <Card.Body>Click me</Card.Body>
      </Card>

      {/* As link */}
      <Card href="/article/123">
        <Card.Body>Read article</Card.Body>
      </Card>

      {/* External link */}
      <Card href="https://example.com" target="_blank">
        <Card.Body>Visit external site</Card.Body>
      </Card>
    </>
  );
}

Props

Card

PropTypeDefaultDescription
variant'default' | 'elevated' | 'outline''default'Visual style variant
padding'none' | 'sm' | 'md' | 'lg''md'Internal padding
onClick() => void-Makes card clickable as button
hrefstring-Makes card a link
targetstring-Link target (e.g., '_blank')

Card.Header / CardHeader

PropTypeDefaultDescription
image{ src: string; alt: string; height?: number }-Header image configuration

Accessibility

The Card component is built with accessibility in mind:

  • Clickable cards use proper semantic elements (<a> for links, <div role="button"> for buttons)
  • Clickable cards are keyboard accessible (Enter and Space keys)
  • Link cards support target for external links
  • Proper focus visible states for interactive cards
  • Images include required alt text

Best practices:

  • For clickable cards, ensure the entire card provides clear affordance (hover/focus states)
  • Use href for navigation, onClick for actions
  • Provide descriptive alt text for header images
  • Don't nest interactive elements inside clickable cards