PurchaseOptionCard

Quick Preview

Mortgage Plan20% Interest Rate

₦1,200,000

Per Month

₦5,000,000

Initial Deposit

₦80,000,000

Max Loan Amount

20 Years

Max Payment Period

The card is composable: assemble it from its parts so the header content and, especially, the footer actions can vary per use. Setting disabled on the root mutes the header and grid text automatically — pass disabled to the footer buttons yourself, since they are supplied by the consumer.

import { Badge } from "@giddaa-housing/ui/badge";
import { Button } from "@giddaa-housing/ui/button";
import {
  PurchaseOptionCard,
  PurchaseOptionCardAmount,
  PurchaseOptionCardCadence,
  PurchaseOptionCardFooter,
  PurchaseOptionCardGrid,
  PurchaseOptionCardHeader,
  PurchaseOptionCardItem,
  PurchaseOptionCardLabel,
  PurchaseOptionCardMeta,
} from "@giddaa-housing/ui/purchase-option-card";

<PurchaseOptionCard>
  <PurchaseOptionCardHeader>
    <PurchaseOptionCardMeta>
      <PurchaseOptionCardLabel>Mortgage Plan</PurchaseOptionCardLabel>
      <Badge variant="default" border={false} shape="round" size="sm">
        20% Interest Rate
      </Badge>
    </PurchaseOptionCardMeta>
    <div>
      <PurchaseOptionCardAmount>₦1,200,000</PurchaseOptionCardAmount>
      <PurchaseOptionCardCadence>Per Month</PurchaseOptionCardCadence>
    </div>
  </PurchaseOptionCardHeader>
  <PurchaseOptionCardGrid>
    <PurchaseOptionCardItem label="Initial Deposit">₦5,000,000</PurchaseOptionCardItem>
    <PurchaseOptionCardItem label="Max Loan Amount">₦80,000,000</PurchaseOptionCardItem>
    <PurchaseOptionCardItem label="Max Payment Period" wide>20 Years</PurchaseOptionCardItem>
  </PurchaseOptionCardGrid>
  <PurchaseOptionCardFooter>
    <Button variant="primary-outline" size="md" className="flex-1">View Details</Button>
    <Button variant="primary" size="md" className="flex-1">Apply Now</Button>
  </PurchaseOptionCardFooter>
</PurchaseOptionCard>

Examples

Default Card

Use the default card for an available purchase plan with primary and secondary actions.

Mortgage Plan20% Interest Rate

₦1,200,000

Per Month

₦5,000,000

Initial Deposit

₦80,000,000

Max Loan Amount

20 Years

Max Payment Period

Selected and Disabled States

Use selected to mark the active plan and disabled when a plan is not currently available.

Selected plan20% Interest Rate

₦1,200,000

Per Month

₦5,000,000

Initial Deposit

₦80,000,000

Max Loan Amount

20 Years

Max Payment Period

Unavailable plan18% Interest Rate

₦950,000

Per Month

₦4,000,000

Initial Deposit

₦60,000,000

Max Loan Amount

15 Years

Max Payment Period

Anatomy

<PurchaseOptionCard>
  <PurchaseOptionCardHeader>
    <PurchaseOptionCardMeta>
      <PurchaseOptionCardLabel /> {/* eyebrow */} + trailing content (e.g. Badge)
    </PurchaseOptionCardMeta>
    <PurchaseOptionCardAmount /> {/* headline figure */}
    <PurchaseOptionCardCadence /> {/* supporting line */}
  </PurchaseOptionCardHeader>
  <PurchaseOptionCardGrid>
    <PurchaseOptionCardItem /> {/* repeated; `wide` spans both columns */}
  </PurchaseOptionCardGrid>
  <PurchaseOptionCardFooter> {/* consumer-supplied buttons */} </PurchaseOptionCardFooter>
</PurchaseOptionCard>

Props