# give/4.18.0/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddonCard.js

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 28 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddonCard.js
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddonCard.js
- Modified: 2022-02-25T01:33:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Promotions/InPluginUpsells/resources/js/components/MustHaveAddonCard.js#L10-L20`.

```javascript
import {Button} from './Button';
import {Card} from './Card';
import styles from './MustHaveAddonCard.module.css';

export const MustHaveAddonCard = ({name, description, icon, image, features, actionLink, actionText}) => (
    <Card as="article" className={styles.card}>
        <div className={styles.header}>
            <img src={icon} alt="" />
            <h3 className={styles.title}>{name}</h3>
        </div>
        <img className={styles.image} src={image} alt="" />
        <p className={styles.description}>{description}</p>
        <ul className={styles.features}>
            {features.map((feature) => (
                <li key={feature} className={styles.feature}>
                    <svg className={styles.checkmark} viewBox="0 0 16 12" preserveAspectRatio="xMidYMid meet">
                        <use href="#give-in-plugin-upsells-checkmark" />
                    </svg>
                    {feature}
                </li>
            ))}
        </ul>
        <Button as="a" href={actionLink} rel="noopener" target="_blank" className={styles.button}>
            {actionText}
        </Button>
    </Card>
);

```