SaaS Card

Container for grouped content with header and footer

SaaSLayout

Overview

The Card component provides a structured container with optional header, content, and footer sections. It uses semantic sub-components (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) to organize content consistently.

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@leanicon/web-builder-library/saas";

<Card>
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>Track your project progress.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content here.</p>
  </CardContent>
  <CardFooter>
    <span>Footer info</span>
  </CardFooter>
</Card>;

Variants

Default

Project Alpha
Track your project progress and team activity in one place.

Last updated 2 hours ago. 3 open tasks remaining before the next milestone.

Due Apr 15, 2026In Progress

Dark

Project Alpha
Track your project progress and team activity in one place.

Last updated 2 hours ago. 3 open tasks remaining before the next milestone.

Due Apr 15, 2026In Progress