TopOffer5
The TopOffer5 component displays a collapsible alert card with a background image, featuring a customizable message, email input with a button, and responsive styling for different screen sizes.
All available props for the TopOffer5 component are defined and handled within Component usage path file. This allows for easy modifications to the content of the TopOffer section.
Component path: src/blocks/top-offer/TopOffer5.tsx
Component usage path: src/app/blocks/top-offer/top-offer5/page.tsx
Preview link: https://www.saasable.io/blocks/top-offer/top-offer5
Props Details
heading
string
The main heading text of the alert.
"Exclusive Offer"
caption
string (Optional)
The caption or additional description for the offer.
"Sign up now to receive updates and special offers!"
bgImage
BgImageProps
Contains the background image configuration for the GraphicsCard.
{ src: '/images/offer-bg.jpg', alt: 'Background Image' }
primaryBtn
ButtonProps
Props for the primary button used in the subscription input field.
{ label: 'Subscribe', onClick: () => console.log('Subscribed') }
icon
SpriteIconProps
The icon to be displayed within the alert. Can be a string (icon name) or SvgIconProps.
It will display an icon on the left side of the top offer.
handleClick
function (Optional)
Function to handle the click event for closing the alert. If not provided, the alert can be closed by internal state management.
() => console.log('Alert closed')
Last updated