CTA with Background

Highlight action with a visually rich background

npm run add CtaWithBackground

Use the CtaWithBackground component to create call-to-action cards with a list of features and a background image to grab users attention.

Astro CTA with Background

Rocket launch your frontend projects faster

Premium components
Additional templates
Lifetime access

Explore -> cta-with-bg

Unlock code

<CtaWithBackground
    title="Astro CTA with Background"
    subTitle="Rocket launch your frontend projects faster"
    features={{
        items: [
            { icon: 'circle-check', text: 'Premium components' },
            { icon: 'circle-check', text: 'Additional templates' },
            { icon: 'circle-check', text: 'Lifetime access' }
        ]
    }}
    cta={{
        text: 'Explore ->',
        href: '/explore'
    }}
    background={{
        src: '/img/cta-with-bg.png',
        alt: 'cta-with-bg',
        width: 1200,
        height: 350
    }}
/>

The component requires a title, background, and cta props, however, you can optionally define a subTitle and features to build a visually more prominent card. The cta can be customized through ButtonProps, so you can easily specify themes or other attributes.

Features

The features prop is using the IconList component, and apart from the items property, you can also specify a color property to set the colors of the icons:

Astro CTA with Background

Rocket launch your frontend projects faster

Premium components
Additional templates
Lifetime access

Explore -> cta-with-bg

Unlock code

<CtaWithBackground
    title="Astro CTA with Background"
    subTitle="Rocket launch your frontend projects faster"
    features={{
        color: 'var(--w-color-info)',
        items: [
            { icon: 'circle-check', text: 'Premium components' },
            { icon: 'circle-check', text: 'Additional templates' },
            { icon: 'circle-check', text: 'Lifetime access' }
        ]
    }}
    ...
/>

You can also specify the same color property on individual features.items nodes to give different icons different colors.

API

Unlock code

type CtaWithBackgroundProps = {
    title: string
    subTitle?: string
    features?: Omit<IconListProps, 'columns' | 'className'>
    cta: ({
        text?: string
        icon?: string
    } & ButtonProps)
    background: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    className?: string
}

Documentation for ButtonProps

Documentation for IconListProps

Prop	Purpose
`title`	Sets the title of the section.
`subTitle`	Sets a subtitle under the `title` prop.
`features`	Pass the props of an `IconList` component to set a list of features.
`cta.text`	Sets a label for the CTA button.
`cta.icon`	Sets an SVG icon for the CTA button.
`background.src`	Sets the path for the background image.
`background.alt`	Sets an alternate text for the background image.
`background.width`	Sets the width of the background image.
`background.height`	Sets the height of the background image.
`background.lazy`	Set to `true` to enable lazy loading for the background image.
`className`	Pass additional CSS classes for the component.