UI

Card

A card component for displaying grouped content.

Card Component

Math Resources

Explore a variety of math resources, including lesson plans, worksheets, and interactive activities.

Science Projects

Discover exciting science projects and experiments to engage your homeschoolers.

import React from 'react';
import Card from '@/components/ui/card';

const CardDemo = () => {
  return (
    <div className="flex flex-col items-center space-y-6">
      <h2 className="text-2xl font-bold mb-6">Card Component</h2>
      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        <Card title="Math Resources" image="/images/dgiui_cardimg1.png" className="card-primary">
          <p>Explore a variety of math resources, including lesson plans, worksheets, and interactive activities.</p>
        </Card>
        <Card title="Science Projects" image="/images/dgiui_cardimg2.png" className="card-primary">
          <p>Discover exciting science projects and experiments to engage your homeschoolers.</p>
        </Card>
      </div>
    </div>
  );
};

export default CardDemo;

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Import all parts and piece them together.

import Card from "@/components/ui/card"

<Card title="Sample Title" image="sample.jpg">Content here</Card>

UI