Card

Card

The Card component groups related content and actions into a flexible, composable container. Cards can be used to display information, actions, or other related content in a visually distinct section.

import Avatar from "rocksolidjs/Avatar";
import Card from "rocksolidjs/Card";
import CardHeader from "rocksolidjs/CardHeader";
import CardTitle from "rocksolidjs/CardTitle";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";
import CardDescription from "rocksolidjs/CardDescription";
import Chip from "rocksolidjs/Chip";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Card class="max-w-sm">
      <CardHeader class="flex flex-row items-center gap-3">
        <Avatar
          src="https://i.pravatar.cc/80?img=12"
          alt="John Doe"
          size="large"
        />
        <div>
          <CardTitle class="text-normal">John Doe</CardTitle>
          <CardDescription class="pt-0">Product Designer</CardDescription>
        </div>
      </CardHeader>
      <CardContent>
        <Typography variant="body2" color="textSecondary">
          Designing simple and accessible experiences for the next
          generation of products.
        </Typography>
        <div class="mt-3 flex gap-2">
          <Chip size="small" label="Design" />
          <Chip size="small" label="Product" />
        </div>
      </CardContent>
      <CardFooter>
        <Button>View profile</Button>
      </CardFooter>
    </Card>
  );
}

Composition

Card is composed of smaller components that can be combined to create different layouts.

import Card from "rocksolidjs/Card";
import CardHeader from "rocksolidjs/CardHeader";
import CardTitle from "rocksolidjs/CardTitle";
import CardDescription from "rocksolidjs/CardDescription";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <Card class="max-w-sm">
      <CardHeader>
        <CardTitle>Project overview</CardTitle>
        <CardDescription>
          Track your project progress.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your project is currently on track and all milestones are
        progressing as expected.
      </CardContent>
      <CardFooter>
        <Button>View project</Button>
      </CardFooter>
    </Card>
  );
}

Use CardHeader, CardTitle, and CardDescription for introductory content, CardContent for the main content, and CardFooter for actions or supporting information.

Each composition component is optional, allowing you to create cards that fit different content and layout requirements.

Examples

Filled

Use the filled variant for cards with a subtle filled background.

import Card from "rocksolidjs/Card";
import CardHeader from "rocksolidjs/CardHeader";
import CardTitle from "rocksolidjs/CardTitle";
import CardDescription from "rocksolidjs/CardDescription";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <Card variant="filled">
      <CardHeader>
        <CardTitle>Project overview</CardTitle>
        <CardDescription>
          Track your project progress.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your project is currently on track.
      </CardContent>
      <CardFooter>
        <Button>View project</Button>
      </CardFooter>
    </Card>
  );
}

Elevated

Use the elevated variant when the card should appear raised above the surrounding content.

import Card from "rocksolidjs/Card";
import CardHeader from "rocksolidjs/CardHeader";
import CardTitle from "rocksolidjs/CardTitle";
import CardDescription from "rocksolidjs/CardDescription";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Project overview</CardTitle>
        <CardDescription>
          Track your project progress.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your project is currently on track.
      </CardContent>
      <CardFooter>
        <Button>View project</Button>
      </CardFooter>
    </Card>
  );
}

Outlined

Use the outlined variant to define the card with a visible border.

import Card from "rocksolidjs/Card";
import CardHeader from "rocksolidjs/CardHeader";
import CardTitle from "rocksolidjs/CardTitle";
import CardDescription from "rocksolidjs/CardDescription";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <Card variant="outlined">
      <CardHeader>
        <CardTitle>Project overview</CardTitle>
        <CardDescription>
          Track your project progress.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your project is currently on track.
      </CardContent>
      <CardFooter>
        <Button>View project</Button>
      </CardFooter>
    </Card>
  );
}

Ghost

Use the ghost variant for a minimal card without a background or border.

import Card from "rocksolidjs/Card";
import CardHeader from "rocksolidjs/CardHeader";
import CardTitle from "rocksolidjs/CardTitle";
import CardDescription from "rocksolidjs/CardDescription";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";

export default function Example() {
  return (
    <Card variant="ghost">
      <CardHeader>
        <CardTitle>Project overview</CardTitle>
        <CardDescription>
          Track your project progress.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your project is currently on track.
      </CardContent>
      <CardFooter>
        <Button>View project</Button>
      </CardFooter>
    </Card>
  );
}

Customized

Combine the Card components with other components to create specialized card layouts for different use cases.

import Card from "rocksolidjs/Card";
import CardContent from "rocksolidjs/CardContent";
import CardFooter from "rocksolidjs/CardFooter";
import Button from "rocksolidjs/Button";
import Chip from "rocksolidjs/Chip";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <Card 
      variant="ghost"
      class="bg-gradient-to-br from-sky-500 via-blue-500 to-indigo-600 text-white shadow-lg"
    >
      <CardContent class="p-5">
        <div class="flex items-start justify-between">
          <div>
            <Typography
              variant="body2"
              class="text-white/80"
            >
              Mumbai
            </Typography>
            <Typography
              variant="h2"
              class="mt-1 font-semibold tracking-tight text-white"
            >
              28°
            </Typography>
            <Typography
              variant="body2"
              class="text-white/80"
            >
              Mostly sunny
            </Typography>
          </div>
          <div class="flex size-12 items-center justify-center rounded-full bg-white/15 text-2xl backdrop-blur-sm">
            ☀️
          </div>
        </div>
        <div class="mt-5 flex items-center gap-2">
          <Chip
            label="H: 32°"
            size="small"
            class="border-0 bg-white/15 dark:bg-white/15 text-white backdrop-blur-sm"
          />
          <Chip
            label="L: 25°"
            size="small"
            class="border-0 bg-white/15 dark:bg-white/15 text-white backdrop-blur-sm"
          />
          <Chip
            label="Humidity 54%"
            size="small"
            class="border-0 bg-white/15 dark:bg-white/15 text-white backdrop-blur-sm"
          />
        </div>
      </CardContent>
      <CardFooter 
        class="items-center justify-between border-t border-white/10 bg-white/5 px-5 py-3">
          <Typography
            variant="body2"
            class="text-white/70"
          >
            Updated 5 min ago
          </Typography>
          <Button
            size="small"
            variant="ghost"
            class="text-white hover:bg-white/10 hover:text-white"
          >
            Details
          </Button>
      </CardFooter>
    </Card>
  );
}

Accessibility

  • Use a semantic heading for CardTitle when the card represents a distinct section of content.
  • Ensure the heading level used by CardTitle follows the page’s heading hierarchy.
  • Use meaningful text for card titles and descriptions so users can understand the purpose of the card.
  • Do not rely on color, borders, or shadows alone to communicate important information.
  • Ensure interactive elements within a card are keyboard accessible and have clear accessible names.
  • When a card represents a standalone piece of content, consider using a semantic element such as <article> for the card container.

API

Card

The Card component provides a flexible container for grouping related content and supports multiple visual variants.

Prop Type Required Default Description
children JSXElement No — The content to render inside the card.
class string No — Additional CSS classes applied to the card.
variant "filled" | "elevated" | "outlined" | "ghost" No "outlined" Controls the visual style of the card.

CardHeader

The CardHeader component groups the title, description, and other introductory content at the top of a card.

Prop Type Required Default Description
children JSXElement No — The content to render inside the card header.
class string No — Additional CSS classes applied to the card header.

CardTitle

The CardTitle component displays the primary heading for a card.

Prop Type Required Default Description
as "h1" | "h2" | "h3" | "h4" | "h5" | "h6" No "h2" Sets the HTML heading element used for the card title.
children JSXElement No — The title content displayed in the card header.
class string No — Additional CSS classes applied to the card title.

CardDescription

The CardDescription component displays supporting text below the card title.

Prop Type Required Default Description
children JSXElement No — The descriptive content displayed below the card title.
class string No — Additional CSS classes applied to the card description.

CardContent

The CardContent component contains the main content of a card.

Prop Type Required Default Description
children JSXElement No — The main content displayed inside the card.
class string No — Additional CSS classes applied to the card content.

CardFooter

The CardFooter component contains actions or supporting content at the bottom of a card.

Prop Type Required Default Description
children JSXElement No — The content displayed at the bottom of the card, typically actions or supporting information.
class string No — Additional CSS classes applied to the card footer.
  • Button — Use Button for actions within a card.
  • Divider — Use Divider to visually separate sections within a card.