Fund Raising Card

Collect donations from users for campaigns

npm run add FundRaisingCard

Use the FundRaisingCard component to highlight fundraising campaigns and encourage donations or support using call to actions. Use them to promote charity or crowdfunding campaigns or to display donation metrics. The can help increase user engagement and improve transparency.

125 of 300 patrons

42%

Fund Raising Card

Use the FundRaisingCard component to collect donations from users for a campaign.

Donate

213 of 300 donators

71%

Themed Fund Raising Card

Use the FundRaisingCard component to collect donations from users for a campaign.

Donate

<FundRaisingCard
    progress={125}
    goal={300}
    title="Fund Raising Card"
    additionalLabel="patrons"
    progressBar={{ label: true }}
    buttons={[{ text: 'Donate' }]}
    img={{
        src: '/img/featured.png',
        alt: 'Featured image alt',
        height: 175,
        width: 300
    }}
>
    <span class="muted">
        Use the <code>FundRaisingCard</code> component to collect donations from users for a campaign.
    </span>
</FundRaisingCard>

The FundRaisingCard component has three mandatory props:

• progress: The current progress of the fund raising.
• goal: The total amount to reach.
• title: A title for the fund raising campaign.

The progress bar is automatically created using the progress and goal props. The rest of the props from the above example are optional:

• additionalLabel: Sets additional text above the progress bar.
• progressBar: Customizes the appearance of the progress bar. You can use any value from the ProgressProps type. Please read the documentation of the Progress component for a full list of available options.
• buttons: Pass an array of ButtonProps object to add buttons at the bottom of your fund raising card. Read the API documentation of the Button component for available options.
• img: Sets an optional image for the card. You can set the lazy property to true in this object to lazy-load the image.

Inside the component, you can pass any other element to build the body of the card.

Cards

The FundRaisingCard component extends the Card component, meaning you can further customize its appearance with any valid CardProps value. Here are some other examples with different styles using card configurations:

<FundRaisingCard
    ...
    secondary={true}
    buttons={[{
        text: 'Donate'
    }, {
        text: 'Share',
        theme: 'outline'
    }]}
>...</FundRaisingCard>

<FundRaisingCard
    ...
    compact={true}
    progressBar={{
        label: true,
        color: 'var(--w-color-success)'
    }}
>...</FundRaisingCard>

Labels

To customize the label, you can use the progressLabel prop on the card which supports placeholders for the progress and goal props using the {0} and {1} syntax respectively. Take the following as an example:

<FundRaisingCard
    progress={125}
    goal={300}
    title="Fund Raising Card"
    progressBar={{ label: true }}
    progressLabel="<b>${0} reached</b> of ${1}"
    secondary={true}
>...</FundRaisingCard>

---
const progress = 125
const goal = 300
---

<FundRaisingCard
    progress={progress}
    goal={goal}
    title="Fund Raising Card"
    progressBar={{ label: true }}
    progressLabel={`We need <b>${goal - progress}</b> supporters to maintain this site.`}
    secondary={true}
>...</FundRaisingCard>

Progress

The progressbar itself can also be customized using the progressBar prop. Read the documentation of the Progress component to see all available options for this prop.

<FundRaisingCard
    progress={125}
    goal={300}
    title="Small, striped progress bar"
    progressBar={{
        striped: true,
        square: true,
        size: null,
        stripeLight: '#B2F78D',
        stripeDark: '#70C542',
        background: 'var(--w-color-primary-60)'
    }}
/>

API

type FundRaisingCardProps = {
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    progress: number
    goal: number
    progressLabel?: string
    additionalLabel?: string
    progressBar?: Omit<ProgressProps, 'value'>
    title: string
    buttons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
    className?: string
} & CardProps