Newsletter Card

Promote newsletter subscriptions with cards

npm run add NewsletterCard

Use the NewsletterCard component to promote newsletter subscriptions by combining an image, short description, input field, and call-to-action button within a visually appealing card layout.

Preview - card title

Join our Newsletter

Don't miss out on important updates! Join now to level up your skills.

Unlock code

<NewsletterCard
    title="Preview - card title"
    heading="Join our Newsletter"
    text="Don't miss out on <b>important updates</b>!"
    img={{
        src: '/img/newsletter.png',
        alt: 'Newsletter',
        width: 250,
        height: 300
    }}
/>

Alternate Layout

To change the layout of the card, you can use the alternate prop. The component is also based on the Card component, so you can use card-specific props to further style your newsletter, such as secondary or compact:

Alternate layout and secondary card

Join our Newsletter

Don't miss out on important updates! Join now to level up your skills.

Unlock code

<NewsletterCard
    ...
    alternate={true}
    secondary={true}
/>

Custom Form

You can also define a custom form through the form prop, or edit the default form directly inside the component:

Join our Newsletter

Don't miss out on important updates! Join now to level up your skills.

Unlock code

<NewsletterCard
    ...
    form={[
        {
            type: 'group',
            fields: [
                {
                    type: 'text',
                    placeholder: 'Name',
                    name: 'name'
                },
                {
                    type: 'email',
                    placeholder: 'Email',
                    name: 'email'
                }
            ]
        },
        {
            type: 'button',
            label: 'Join',
            theme: 'success'
        }
    ]}
/>

To handle form submission and user interaction, you can edit the provided onChange, onSubmit and onError calls inside the component.

API

Unlock code

type NewsletterCardProps = {
    heading?: string
    text?: string
    form?: FormField[]
    alternate?: boolean
    img: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
} & CardProps

Documentation for FormField

Documentation for CardProps

Prop	Purpose
`heading`	Sets a heading for the card.
`text`	Sets a text under the heading. Supports the use of HTML.
`form`	Sets a custom form for the card. Defaults to an email input and a submit button.
`alternate`	Set to `true` to switch the layout.
`img.src`	Sets the path for the image.
`img.alt`	Sets an alternate text for the image.
`img.width`	Sets the width of the image.
`img.height`	Sets the height of the image.
`img.lazy`	Set to `true` to enable lazy loading for the image.