Card

import React from "react";

function Card({ header, title, text, footer }) {
  return (
    <div className="section mt-2">
      <div className="card">
        {header && <div className="card-header">{header}</div>}
        <div className="card-body">
          {title && <h5 className="card-title">{title}</h5>}
          {text && <p className="card-text">{text}</p>}
        </div>
        {footer && <div className="card-footer">{footer}</div>}
      </div>
    </div>
  );
}

export default Card;

import React from "react";
import Card from "./Card";

function ParentComponent() {
  return (
    <div>
      <Card
        header="Card Header"
        title="Title"
        text="With supporting text below as a natural lead-in to additional content."
        footer="This is card footer"
      />

      {/* Example without header and footer */}
      <Card
        title="Title without header and footer"
        text="With supporting text below as a natural lead-in to additional content."
      />

      {/* Example without title and text */}
      <Card header="Card Header without title and text" footer="This is card footer" />
    </div>
  );
}

export default ParentComponent;