Section: Items Grid

Display a grid of item type pages from your project. The items grid automatically pulls all published items and renders them as browsable cards with badges, images, and metadata.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`columns`	number	No	Grid columns (2, 3, or 4)	`3`
`showBadges`	boolean	No	Show item badges	`true`
`showDescription`	boolean	No	Show item descriptions	`true`
`showImage`	boolean	No	Show item images	`true`
`className`	string	No	Custom CSS class	—

How It Works

The items grid automatically fetches all published item type pages in the same project
Items are rendered as cards showing their title, description, image, badges, and custom attributes
If a Directory Hero is on the same page, its search bar filters the grid in real-time

Minimal Example

{
  "type": "items-grid"
}

That's it — no configuration needed. The grid automatically displays all published items from the project.

Full Example

{
  "type": "items-grid",
  "heading": "Featured Tools",
  "description": "Hand-picked tools recommended by our team.",
  "columns": 3,
  "showBadges": true,
  "showDescription": true,
  "showImage": true
}

Item Cards

Each card displays data from the item type page:

Item Field	Card Display
`page_name`	Card title
`description`	Card description (if `showDescription: true`)
`og_image_url`	Card image (if `showImage: true`)
`config.badges`	Colored badge tags (if `showBadges: true`)
`config.url`	External link
`config.attributes`	Custom key-value metadata

Building a Directory

Step 1: Create the Directory Page

curl -X POST "https://api.pagegun.com/pages" \
  -H "Authorization: Bearer $PAGEGUN_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "page_name": "AI Tools",
    "slug": "tools",
    "subroute": "pages",
    "type": "page",
    "project_id": "proj_abc123",
    "config": {
      "sections": [
        {
          "type": "directory-hero",
          "title": "AI Tools Directory",
          "searchPlaceholder": "Search tools..."
        },
        { "type": "items-grid", "columns": 3 }
      ]
    }
  }'

Step 2: Add Items

curl -X POST "https://api.pagegun.com/pages" \
  -H "Authorization: Bearer $PAGEGUN_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "page_name": "ChatGPT",
    "slug": "chatgpt",
    "subroute": "tools",
    "type": "item",
    "project_id": "proj_abc123",
    "description": "AI assistant for writing, coding, and analysis.",
    "og_image_url": "https://example.com/chatgpt-logo.png",
    "config": {
      "badges": [
        { "text": "Free Tier", "color": "green" },
        { "text": "AI", "color": "blue" }
      ],
      "url": "https://chat.openai.com",
      "attributes": {
        "Category": "AI Assistant",
        "Pricing": "Free + $20/mo Pro"
      }
    }
  }'

Step 3: Publish Both

# Publish the directory page
curl -X POST "https://api.pagegun.com/pages/PAGE_ID/publish" \
  -H "Authorization: Bearer $PAGEGUN_API_KEY"

# Publish each item
curl -X POST "https://api.pagegun.com/pages/ITEM_ID/publish" \
  -H "Authorization: Bearer $PAGEGUN_API_KEY"

Directory Hero — Search and filter UI for directories
Page Type: Item — Create individual directory entries
Articles Grid — Similar grid for blog articles