Promotional Card - HapplyUI

A compact card for promotional content with an icon, decorative background element, title, description, and optional link. Supports stroke and filled variants.

Installation

bunx @happlyui/cli@latest add promotional-card

Dependencies

npm packages

@radix-ui/react-slot

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as PromotionalCard from "@/components/ui/promotional-card"

<PromotionalCard.Root>
  <PromotionalCard.Icon as={RiFilter3Line} />
  <PromotionalCard.Decoration as={RiFilter3Line} />
  <PromotionalCard.Content>
    <PromotionalCard.Title>Let me filter</PromotionalCard.Title>
    <PromotionalCard.Description>Apply filter based on what you exactly need</PromotionalCard.Description>
  </PromotionalCard.Content>
</PromotionalCard.Root>

Examples

Stroke

The default stroke variant with white background, border, and subtle shadow. The decoration icon is nearly invisible for a clean look.

Let me filter

Apply filter based on what you exactly need

<PromotionalCard.Root variant="stroke">
  <PromotionalCard.Icon as={RiFilter3Line} />
  <PromotionalCard.Decoration as={RiFilter3Line} />
  <PromotionalCard.Content>
    <PromotionalCard.Title>Let me filter</PromotionalCard.Title>
    <PromotionalCard.Description>Apply filter based on what you exactly need</PromotionalCard.Description>
  </PromotionalCard.Content>
</PromotionalCard.Root>

Filled

Filled variant with a gray background, commonly used for brand promotions.

50% discount on Spotify

For only $4.99 per month!Learn More

<PromotionalCard.Root variant="filled">
  <PromotionalCard.Icon as={RiSpotifyFill} />
  <PromotionalCard.Decoration as={RiSpotifyFill} />
  <PromotionalCard.Content>
    <PromotionalCard.Title>50% discount on Spotify</PromotionalCard.Title>
    <div className="flex items-center gap-1">
      <PromotionalCard.Description>For only $4.99 per month!</PromotionalCard.Description>
      <PromotionalCard.Link href="#">Learn More</PromotionalCard.Link>
    </div>
  </PromotionalCard.Content>
</PromotionalCard.Root>

Clickable

Cards rendered as links using asChild with clickable cursor styling.

Let me filter

Apply filter based on what you exactly need

50% discount on Spotify

For only $4.99 per month!

<PromotionalCard.Root asChild clickable variant="stroke">
  <a href="#">
    <PromotionalCard.Icon as={RiFilter3Line} />
    <PromotionalCard.Decoration as={RiFilter3Line} />
    <PromotionalCard.Content>
      <PromotionalCard.Title>Let me filter</PromotionalCard.Title>
      <PromotionalCard.Description>Apply filter based on what you exactly need</PromotionalCard.Description>
    </PromotionalCard.Content>
  </a>
</PromotionalCard.Root>

Composed

Shorthand composed version that accepts all content as props.

Let me filter

Apply filter based on what you exactly need

50% discount on Spotify

For only $4.99 per month!Learn More

<PromotionalCard.Composed
  variant="filled"
  icon={RiSpotifyFill}
  title="50% discount on Spotify"
  description="For only $4.99 per month!"
  linkText="Learn More"
  linkHref="#"
/>

Grid

Multiple promotional cards in a grid layout.

50% discount on Spotify

For only $4.99 per month!Learn More

50% discount on Netflix

For only $4.99 per month!Learn More

Let me filter

Apply filter based on what you exactly need

<div className="flex flex-wrap justify-center gap-4">
  <PromotionalCard.Composed variant="filled" ... />
</div>

API Reference

PromotionalCard.Root

The main card container with overflow clipping.

Prop	Type	Default	Description
`variant`	`'stroke' \| 'filled'`	`'stroke'`	The visual style of the card
`clickable`	`boolean`	-	Adds cursor-pointer styling
`asChild`	`boolean`	`false`	Renders as child element using Radix Slot, useful for wrapping in links or buttons

PromotionalCard.Icon

Small icon positioned at the top-left of the card. Polymorphic.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element or component to render as

PromotionalCard.Decoration

Large decorative icon at the top-right, partially clipped. Polymorphic. Opacity varies by variant.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element or component to render as

PromotionalCard.Content

Container for title and description row, positioned at the bottom of the card.

Prop	Type	Default	Description

PromotionalCard.Title

The promotional title text.

Prop	Type	Default	Description

PromotionalCard.Description

The description text.

Prop	Type	Default	Description

PromotionalCard.Link

Optional underlined link, placed as a sibling next to Description.

Prop	Type	Default	Description
`href`	`string`	-	The link URL

PromotionalCard.Composed

Shorthand version that composes all subcomponents via props. Accepts all Root props.

Prop	Type	Default	Description
`icon`	`React.ElementType`	-	The icon component for the top-left
`decorationIcon`	`React.ElementType`	-	Override for the decorative background icon. Falls back to icon
`title`	`string`	-	The promotional title text
`description`	`string`	-	The description text
`linkText`	`string`	-	Optional link text
`linkHref`	`string`	-	Optional link URL