Card

Overview

The card component is a container for text, photos, and actions in the context of a single subject.

Preview

Preview

Card Title

Card Description

Card Content

Card Footer

Code

import { Card } from './components/ui';

function MyComponent() {
  return <Card>
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card Description</CardDescription>
    </CardHeader>
    <CardContent>
      <p>Card Content</p>
    </CardContent>
    <CardFooter>
      Card Footer
    </CardFooter>
  </Card>;
}

Installation

npm

npx @mindfiredigital/ignix-ui add card

yarn

yarn @mindfiredigital/ignix-ui add card

pnpm

pnpm @mindfiredigital/ignix-ui add card

Usage

Import the component:

import { Card } from '@mindfiredigital/ignix-ui';

Basic Usage

function BasicCard() {
  return (
    <Card>
      This is a basic card.
    </Card>
  );
}

Examples

Preview

Card Title

Card Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec metus nec ante feugiat placerat. Nullam nec metus nec ante feugiat placerat.

Code

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter,
} from '@ignix-ui/card';

<Card 
  variant="default" 
  size="md" 
  animation="none"
  interactive="none"
>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Feature Card

Preview

Amazing Feature

This feature will blow your mind

Code

import {
  FeatureCard,
  CardTitle,
  CardDescription,
} from '@ignix-ui/card';

<FeatureCard icon={<Star className="h-8 w-8 text-primary" />} variant="elevated">
  <CardTitle>Amazing Feature</CardTitle>
  <CardDescription>This feature will blow your mind</CardDescription>
</FeatureCard>

Stat Card

Preview

99.9%

Uptime

↗ +2.1%

Code

import { StatCard } from '@ignix-ui/card';
  
<StatCard value="99.9%" label="Uptime" trend="up" trendValue="+2.1%"/>