Policy Card

The PolicyCard component is a reusable card for presenting a policy offer with a title, optional icon, description, badge, image, and action link.

import { PolicyCard } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
title	ReactNode	-	Card title.
icon	ReactNode | string	-	Optional icon displayed above the title.
description	ReactNode	-	Optional text below the title.
image	ReactNode	-	Optional image/content aligned to the footer.
badgeText	ReactNode	-	Optional badge displayed at the top of the card.
hideAction	boolean	false	Hides the action if set to true.
actionVariant	ButtonVariant	"smooth"	Button style variant used for the action.
actionContent	ReactNode	-	Action text or custom JSX content.
actionHref	string	-	Link target for the action. If provided, the action renders as an anchor.
actionTarget	HTMLAttributeAnchorTarget	"_self"	Anchor target for the action link.
onClick	MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>	-	Click handler for custom navigation or analytics. When no actionHref is provided, the action renders as a button.
classNames	PolicyCardClassNames	-	Custom classes for specific card sections.
children	ReactNode	-	Extra content rendered under the description.

PolicyCardClassNames

interface PolicyCardClassNames {
  root?: string;
  wrapper?: string;
  contentWrapper?: string;
  title?: string;
  description?: string;
  imageWrapper?: string;
  badgeWrapper?: string;
  badge?: string;
  icon?: string;
  footerWrapper?: string;
  actionWrapper?: string;
}

Usage

Basic example

<PolicyCard
  title="Motor Insurance"
  description="Instantly tailored and competitive solutions."
  badgeText="10% Off"
  icon={<Icon name="car" className="size-7 [&>path]:stroke-primary" />}
  actionContent="Renew"
  actionHref="https://example.com"
/>

With custom action content

<PolicyCard
  title="Medical Insurance"
  description="Reliable care with easy digital access."
  actionContent={
    <>
      <span>View Details</span>
      <span aria-hidden="true">→</span>
    </>
  }
  actionHref="/medical"
  actionTarget="_self"
/>

With custom click handler

<PolicyCard
  title="Travel Insurance"
  description="Covers emergency and trip cancellation."
  actionContent="View policy"
  onClick={() => router.push('/travel-insurance')}
/>

When actionHref is present, the action renders as an anchor. When onClick is provided without actionHref, it renders as a button.

Hide action

<PolicyCard
  title="Travel Insurance"
  description="Covers emergency and trip cancellation."
  hideAction
/>

Features

• Flexible action area with text, custom JSX, or hidden action
• Supports badge, icon, image, and description content
• Easy custom styling through classNames
• Works as either an anchored CTA or a click-only button
• Compatible with the design system button variants