Grid Component

This component renders a customizable, responsive grid of items with optional logos, titles, descriptions, and action buttons. It's designed to be flexible and can be configured to display content in various layouts.

📦 Component Overview

The Grid component is a versatile display system that:

• Arranges items in a responsive 4-column grid (adapts to smaller screens)
• Supports optional elements for each item: logo, title, description, and button
• Works seamlessly in both light and dark mode
• Allows for customization through props

🧩 Usage Example

To use this component, import it into your MDX page and pass it an array of item objects:

import Grid from '@site/src/components/global/grid';

const toolItems = [
  {
    logo: '/img/tools/tool1.svg',
    title: 'Research Tool',
    description: 'Find accurate information quickly',
    buttonText: 'Explore',
    buttonLink: '/tools/research'
  },
  {
    logo: '/img/tools/tool2.svg',
    title: 'Response Generator',
    description: 'Create effective responses to misinformation',
    buttonText: 'Try Now',
    buttonLink: '/tools/response-generator'
  },
  {
    logo: '/img/tools/tool3.svg',
    title: 'Media Library',
    description: 'Access verified media and sources',
    buttonText: 'Browse',
    buttonLink: '/tools/media'
  },
  {
    logo: '/img/tools/tool4.svg',
    title: 'Training Center',
    description: 'Learn advocacy techniques',
    buttonText: 'Start Learning',
    buttonLink: '/tools/training'
  }
];

<Grid 
  items={toolItems} 
  showLogos={true}
  showTitles={true}
  showButtons={true}
  showDescriptions={true}
/>

🛠 Props

The Grid component accepts the following props:

Prop	Type	Default	Description
items	GridItem[]	Required	Array of objects containing item data
showLogos	boolean	true	Whether to display logos
showTitles	boolean	true	Whether to display titles
showButtons	boolean	true	Whether to display buttons
showDescriptions	boolean	false	Whether to display descriptions
className	string	undefined	Additional CSS class to apply to the grid container

Each GridItem object can contain:

| Property | Type | Description |-----|-----|-----|----- | logo | string | URL path to the item's logo image | title | string | Title text for the item | description | string | Description text for the item | buttonText | string | Text to display on the action button | buttonLink | string | URL to navigate to when the button is clicked

🎨 Customization Examples

The Grid component can be customized to create various layouts:

Logo-only Grid

Perfect for displaying partner logos or supported platforms:

<Grid 
  items={partnerLogos} 
  showLogos={true}
  showTitles={false}
  showButtons={false}
  showDescriptions={false}
/>

Card-style Grid with Title and Button

Great for navigation menus or feature highlights:

<Grid 
  items={featureItems} 
  showLogos={false}
  showTitles={true}
  showButtons={true}
  showDescriptions={false}
/>

Complete Feature Grid

Ideal for detailed feature showcases with descriptions:

<Grid 
  items={detailedFeatures} 
  showLogos={true}
  showTitles={true}
  showButtons={true}
  showDescriptions={true}
/>

📱 Responsive Behavior

The Grid component automatically adapts to different screen sizes:

• Desktop: 4 items per row
• Tablet: 2 items per row
• Mobile: 1 item per row (full width)

No additional configuration is needed for responsive layouts.

🌗 Dark/Light Mode Support

The component automatically adapts to the site's current theme using Docusaurus CSS variables, ensuring consistent appearance in both dark and light modes.

🔍 Best Practices

• Use consistent logo dimensions (ideally square) for the best visual appearance
• Keep titles concise (1-3 words works best)
• Limit descriptions to 1-2 short sentences
• Use action-oriented text for buttons
• Ensure all items in a grid have a consistent structure (all with logos or all without)

🧪 Advanced Usage

Custom Styling

You can apply custom styling to the grid by passing a className:

<Grid 
  items={items} 
  className="my-custom-grid"
/>

Then in your CSS:

.my-custom-grid {
  /* Custom styles */
  gap: 3rem;
}

.my-custom-grid .gridItem {
  border: 1px solid var(--ifm-color-primary);
}

Dynamic Content

You can dynamically generate grid items from your data:

import Grid from '@site/src/components/global/grid';

// This could come from an API or data file
const resources = await fetchResources();

// Map the data to grid items
const resourceItems = resources.map(resource => ({
  logo: resource.iconUrl,
  title: resource.name,
  description: resource.summary,
  buttonText: 'View Resource',
  buttonLink: `/resources/${resource.id}`
}));

<Grid items={resourceItems} showDescriptions={true} />