# give/4.17.0/src/Admin/components/Grid/index.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.17.0. 46 lines.

- Page: https://pluginprobe.com/plugins/give/4.17.0/code/src/Admin/components/Grid/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.17.0/raw/src/Admin/components/Grid/index.tsx
- Modified: 2025-09-10T13:42:30+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.17.0/code/src/Admin/components/Grid/index.tsx#L10-L20`.

```tsx
import classnames from 'classnames';
import styles from './styles.module.scss';



/**
 * @since 4.8.0
 */
type GridProps = {
    children: React.ReactNode;
    ariaLabel: string;
};

/**
 * @since 4.8.0
 */
export default function Grid({children, ariaLabel}: GridProps) {
    return (
        <div className={styles.container} role="group" aria-label={ariaLabel}>
            {children}
        </div>
    );
}

/**
 * @since 4.8.0
 */
type GridCardProps = {
    children: React.ReactNode;
    heading: string;
    headingId: string;
    className?: string;
};

/**
 * @since 4.8.0
 */
export function GridCard({children, heading, headingId, className}: GridCardProps) {
    return (
        <div className={classnames(styles.card, className)} role="region" aria-labelledby={`${headingId}-label`}>
            <h3 id={headingId} className={styles.heading}>{heading}</h3>
            {children}
        </div>
    );
}

```