About

A structured card frame for prototyping individual UI components that follow the Breeze Card pattern. Every card has three distinct zones: a **header** (fixed height, border-bottom), a **body** (flexible, fills remaining space), and a **footer** (fixed height, border-top). This structure enforces guard-rails that match how real Breeze Card, CardHeader, CardBody, and CardFooter components work. The header holds a title and optional actions, the body holds your prototype content, and the footer holds action buttons or status information. Use these cards as building blocks — each one represents a single component or widget that will eventually be placed into a page grid layout using FullPageApplicationFrame.

Import

import { PageBuilderCardFrame } from "@/components/frames/PageBuilderCardFrame";

Usage Guidance

When to use

+Prototyping individual card components that follow the Breeze Card header/body/footer pattern.
+Designing dashboard widgets, form sections, data displays, or any bounded component.
+Establishing consistent card structure before composing into page grids.
+Component-level design reviews where the card structure needs to be explicit.

When not to use

−For full-page experiences — use FullPageApplicationFrame instead.
−For side panel prototypes — use ContextPanelFrame instead.
−For modal dialogs — use ModalFrame instead.
−For admin settings screens — use AdminFrame instead.

Code Samples

Default card structure

A card showing the standard header/body/footer structure. The header has a title with a border underneath, the body fills the middle, and the footer has a border above.

<PageBuilderCardFrame title="Job Details">
  <div className="space-y-3">
    <div>
      <label className="text-xs font-medium text-gray-500 block mb-1">Status</label>
      <span className="text-sm text-gray-900">In Progress</span>
    </div>
    <div>
      <label className="text-xs font-medium text-gray-500 block mb-1">Assigned To</label>
      <span className="text-sm text-gray-900">Jane Smith</span>
    </div>
  </div>
</PageBuilderCardFrame>

Card with header actions and footer

A card with a button in the header and Cancel/Save buttons in the footer.

<PageBuilderCardFrame
  title="Edit Resource"
  headerActions={
    <Button buttonType="transparent" compact>
      <Icon name="edit" size={16} />
    </Button>
  }
  footer={
    <div className="flex justify-end gap-2">
      <Button buttonType="transparent" compact>Cancel</Button>
      <Button buttonType="primary" compact>Save</Button>
    </div>
  }
>
  <div className="space-y-3">
    <div>
      <label className="text-xs font-medium text-gray-500 block mb-1">Name</label>
      <input className="w-full border border-gray-300 rounded px-3 py-2 text-sm" />
    </div>
    <div>
      <label className="text-xs font-medium text-gray-500 block mb-1">Role</label>
      <input className="w-full border border-gray-300 rounded px-3 py-2 text-sm" />
    </div>
  </div>
</PageBuilderCardFrame>

Scrollable card

A card with scrollable body content. The header and footer stay fixed while the body scrolls.

<PageBuilderCardFrame
  title="Activity Log"
  height="300px"
  scrollable
  footer={
    <div className="flex justify-end">
      <Button buttonType="transparent" compact>View All</Button>
    </div>
  }
>
  <div className="space-y-3 text-sm">
    <p className="text-gray-600">Job JOB-001 completed by Jane Smith</p>
    <p className="text-gray-600">Job JOB-002 started by Mike Johnson</p>
    <p className="text-gray-600">Job JOB-003 scheduled for tomorrow</p>
    <p className="text-gray-600">Resource Sarah Lee added to team</p>
    <p className="text-gray-600">Job JOB-004 dispatched to field</p>
    <p className="text-gray-600">Job JOB-005 completed by Tom Davis</p>
  </div>
</PageBuilderCardFrame>

Display-only card (no footer)

A card without a footer section, suitable for read-only data displays or KPI widgets.

<PageBuilderCardFrame title="Open Jobs" showFooter={false} height="200px">
  <div>
    <div className="text-3xl font-bold text-blue-600">24</div>
    <div className="text-xs text-gray-500 mt-1">+3 from last week</div>
  </div>
</PageBuilderCardFrame>

Full-width card without padding

A full-width card with content padding disabled for full-bleed content like tables.

<PageBuilderCardFrame
  title="Recent Jobs"
  width="100%"
  contentPadding={false}
  footer={
    <div className="flex justify-between items-center text-xs text-gray-500">
      <span>Showing 3 of 24</span>
      <Button buttonType="transparent" compact>Load More</Button>
    </div>
  }
>
  <table className="w-full text-sm">
    <thead>
      <tr className="border-b text-left text-gray-500">
        <th className="px-4 pb-2 font-medium">Job</th>
        <th className="px-4 pb-2 font-medium">Status</th>
        <th className="px-4 pb-2 font-medium">Assigned</th>
      </tr>
    </thead>
    <tbody>
      <tr className="border-b">
        <td className="px-4 py-2 font-medium text-blue-600">JOB-001</td>
        <td className="px-4 py-2 text-green-600">Completed</td>
        <td className="px-4 py-2 text-gray-500">Jane Smith</td>
      </tr>
    </tbody>
  </table>
</PageBuilderCardFrame>

API Reference

Prop	Type	Default	Description
children*	React.ReactNode	—	The prototype content to render in the card body. This is the flexible zone between the header and footer.
title	string	"Card Title"	Title text displayed in the card header.
headerActions	React.ReactNode	—	Optional content rendered on the right side of the header. Typically buttons, badges, or icons.
footer	React.ReactNode	—	Content rendered in the footer area. Typically action buttons (Cancel/Save). When omitted and showFooter is true, renders an empty bordered footer area as a visual guard-rail.
showHeader	boolean	true	Show or hide the header section. When hidden, the body fills the top of the card.
showFooter	boolean	true	Show or hide the footer section. When true without a footer prop, renders an empty bordered area to maintain the card structure.
width	string	"50%"	Card width. Use grid-aligned sizes: "25%" (quarter — 1/4, maps to col-span-3), "33.333%" (third — 1/3, maps to col-span-4), "50%" (half — 1/2, maps to col-span-6), "100%" (full — 1/1, maps to col-span-12).
height	string	"400px"	Card height. Use a fixed value to constrain the card, or "auto" for content-driven height where the body grows with its content.
scrollable	boolean	false	When true, the body area scrolls on overflow while the header and footer remain fixed. Essential for cards with variable-length content.
contentPadding	boolean	true	Whether the body area has padding (p-4). Set to false for full-bleed content like tables or images.