Section: Articles Grid

Display a grid of published article type pages from your project. Articles are rendered as cards with title, description, date, and optional featured image.

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`
`showDate`	boolean	No	Show publish date	`true`
`showDescription`	boolean	No	Show article description	`true`
`showImage`	boolean	No	Show article featured image	`true`
`limit`	number	No	Maximum articles to display	All
`className`	string	No	Custom CSS class	—

How It Works

The articles grid automatically fetches all published article type pages from the same project, sorted by publish date (newest first).

Minimal Example

{
  "type": "articles-grid"
}

Full Example

{
  "type": "articles-grid",
  "label": "Latest Posts",
  "heading": "From Our Blog",
  "description": "Insights, tutorials, and updates from the team.",
  "columns": 3,
  "showDate": true,
  "showDescription": true,
  "showImage": true,
  "limit": 6
}

Article Cards

Each card displays data from the article type page:

Article Field	Card Display
`page_name`	Card title
`description`	Card excerpt
`og_image_url`	Featured image
`published_at`	Publish date
`slug`	Link target: `/{subroute}/{slug}`

Building a Blog

Step 1: Create the Blog Landing Page

curl -X POST "https://api.pagegun.com/pages" \
  -H "Authorization: Bearer $PAGEGUN_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "page_name": "Blog",
    "slug": "blog",
    "subroute": "pages",
    "type": "page",
    "project_id": "proj_abc123",
    "config": {
      "sections": [
        {
          "type": "hero",
          "heading": "Our Blog",
          "description": "Tutorials, insights, and product updates."
        },
        {
          "type": "articles-grid",
          "columns": 3,
          "showDate": true
        }
      ]
    }
  }'

Step 2: Create Articles

curl -X POST "https://api.pagegun.com/pages" \
  -H "Authorization: Bearer $PAGEGUN_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "page_name": "Getting Started with PageGun API",
    "slug": "getting-started",
    "subroute": "blog",
    "type": "article",
    "project_id": "proj_abc123",
    "description": "Learn how to create your first page with the PageGun API in under 5 minutes.",
    "og_image_url": "https://example.com/blog-image.jpg",
    "markdown_content": "# Getting Started with PageGun API\n\nIn this tutorial, we will walk through creating your first page..."
  }'

Step 3: Publish Everything

Publish the blog page and each article separately.

Use Cases

Company blog — SEO content, product updates, tutorials
Landing page section — Show latest 3 posts on your homepage with limit: 3
Content hub — Dedicated blog page with full article grid

Tips

Use limit on landing pages to show only recent posts (3-6 is ideal)
Write good descriptions — they appear as card excerpts and SEO meta descriptions
Add og_image_url to every article for visual cards and social sharing

Page Type: Article — Create Markdown articles
Items Grid — Similar grid for directory items
Guide: Managing Articles — Full article workflow