# give/4.16.9/src/Views/Components/Card/index.js

GiveWP – Donation Plugin and Fundraising Platform, version 4.16.9. 25 lines.

- Page: https://pluginprobe.com/plugins/give/4.16.9/code/src/Views/Components/Card/index.js
- Raw: https://pluginprobe.com/plugins/give/4.16.9/raw/src/Views/Components/Card/index.js
- Modified: 2024-09-25T21:57:00+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.16.9/code/src/Views/Components/Card/index.js#L10-L20`.

```javascript
// Import vendor dependencies
import PropTypes from 'prop-types';
// Import styles
import styles from './style.module.scss';

const Card = ({width = 4, title = null, children = null}) => {
    return (
        <div className={styles.card} style={{gridColumn: 'span ' + width}}>
            {title && <div className={styles.title}>{title}</div>}
            <div className={styles.content}>{children}</div>
        </div>
    );
};

Card.propTypes = {
    // Number of grid columns for Card to span, out of 12
    width: PropTypes.number,
    // Title of card
    title: PropTypes.string,
    // Elements to displayed in content area of card (eg: Chart, List)
    children: PropTypes.node.isRequired,
};

export default Card;

```