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
    }}
/>

Only the img prop is required for the NewsletterCard component. By default, it’ll use a form with an email and a “Subscribe” button that can be customized through the form prop, or directly inside the component. The additional props are optional. The component extends the Card component, meaning you can use card-specific props as well, such as title, secondary, or compact.

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.