Card with CTA

Combine your cards with a clear call to action

Use the CardwithCta component to create cards with a clear CTA to encourage user engagement. Use them to promote your products, services, or features with a “Learn More” or “Buy Now” button, encourage sign-ups for newsletters, or drive engagement with content.

---
const ctaButton = {
    text: 'CTA',
    theme: 'secondary'
}
---

<CardwithCta title="Card with CTA" button={ctaButton}>
    ...
</CardwithCta>

The card must be created with the following two required props:

• title: Sets a title for the card.
• button: Sets a CTA button for the card. It can accept any valid ButtonProps types.

The component can also be created with optional subtitles, using the subTitle prop:

<CardwithCta
    title="Card with CTA"
    subTitle="With additional subtitle"
    button={{ ... }}
>
    ...
</CardwithCta>

Cards with Images

You can use the img prop to create cards with featured images:

Card with CTA Including subtitle

Component with all possible props.

CTA

<CardwithCta
        title="Card with CTA"
        subTitle="Including subtitle"
        img={{
            src: '/img/featured.png',
            alt: 'Featured img alt text',
            width: 100,
            height: 150,
            lazy: true
        }}
        button={{ ... }}
>
    Component with all possible props.
</CardwithCta>

You can specify the following properties on the image object:

• src: Sets the path to the image.
• alt: Sets an alternate text for the image.
• width and height: Sets the width and height of the image.
• lazy: Optionally, set the lazy property to true to lazy-load the image.

API

type CardWithCtaProps = {
    title: string
    subTitle?: string
    className?: string
    bodyClassName?: string
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    button: {
        text: string
        icon?: string
    } & ButtonProps
} & CardProps