Archive Layouts Showcase

Archive layouts determine how collections of content are displayed on hub pages. Choose the perfect layout for your content type and audience preferences.

Grid Layout

Overview

The Grid layout presents content in a clean, card-based format with equal-height rows. Perfect for visual content with featured images.

Best For

• Blog posts with hero images
• Product catalogs
• Portfolio items
• Team directories

Features

• Responsive 1-3 column grid
• Featured badge support
• Thumbnail images
• Consistent card heights
• Hover effects

Configuration

---
title: Blog
contentType: hub
archiveLayout: grid
---

Customization Options

// In cms.js config
archive: {
  showThumbnail: true,
  showExcerpt: true,
  excerptLength: 150,
  showAuthor: true,
  showDate: true,
  showTags: true
}

List Layout

Overview

The List layout provides a traditional blog-style presentation with horizontal cards. Ideal for text-heavy content where readability is paramount.

Best For

• Traditional blogs
• News articles
• Documentation
• Announcements

Features

• Full-width cards
• Optional side thumbnails
• Extended excerpts
• Clear typography
• “Read more” links

Configuration

---
title: News
contentType: hub
archiveLayout: list
---

Layout Variations

• With thumbnails: Visual interest on the left
• Without thumbnails: Maximum text space
• Compact mode: Reduced spacing for more items

Masonry Layout

Overview

The Masonry layout creates a dynamic, Pinterest-style grid with varying card heights. Perfect for mixed content types and visual variety.

Best For

• Photography galleries
• Mixed media content
• Creative portfolios
• Social feeds

Features

• Variable height cards
• Automatic flow adjustment
• Visual hierarchy
• Engaging presentation
• Optimal space usage

Configuration

---
title: Gallery
contentType: hub
archiveLayout: masonry
---

Dynamic Sizing

Cards automatically adjust height based on:

• Image aspect ratios
• Content length
• Tag count
• Metadata presence

Comparing Layouts

Grid Layout

Pros:

• Consistent, organized appearance
• Easy scanning
• Great for thumbnails
• Mobile-friendly

Cons:

• Less content variety
• May waste space with short content

List Layout

Pros:

• Maximum content visibility
• Great for text
• Familiar blog format
• Efficient space use

Cons:

• Less visual impact
• Can feel monotonous

Masonry Layout

Pros:

• Visual interest
• Efficient space usage
• Unique presentation
• Stands out

Cons:

• Can feel chaotic
• Harder to scan systematically

Responsive Behavior

Mobile (< 640px)

All layouts collapse to single column:

• Full-width cards
• Stacked elements
• Touch-friendly sizing

Tablet (640px - 1024px)

• Grid: 2 columns
• List: Full width
• Masonry: 2 columns

Desktop (> 1024px)

• Grid: 3 columns
• List: Full width with sidebar
• Masonry: 3-4 columns

Pagination

All archive layouts support pagination:

Default Settings

• 10 items per page
• Page numbers
• Previous/Next buttons

Configuration

// cms.js
itemsPerPage: 10,
paginationShowFirst: true,
paginationShowLast: true

URL Structure

• Page 1: /blog/
• Page 2: /blog/?page=2
• Page N: /blog/?page=n

Performance Optimization

Image Loading

• Lazy loading below fold
• Responsive images
• WebP/AVIF formats
• Optimized thumbnails

Content Loading

• Static generation
• Minimal JavaScript
• CSS-only animations
• Efficient DOM structure

Customization Tips

1. Match Content Type

• Visual content → Grid or Masonry
• Text content → List
• Mixed content → Masonry

2. Consider Audience

• Scanners → Grid
• Readers → List
• Browsers → Masonry

3. Brand Alignment

• Professional → Grid or List
• Creative → Masonry
• Editorial → List

Advanced Features

Filtering (Coming Soon)

// Future feature
filters: {
  categories: true,
  tags: true,
  date: true,
  author: true
}

Sorting Options

sortBy: 'date',    // or 'title', 'order'
sortOrder: 'desc'  // or 'asc'

Featured Content

Highlight important items:

featured: true

Switching Layouts

Change layouts anytime by updating frontmatter:

# Was grid
archiveLayout: grid

# Now masonry
archiveLayout: masonry

The system automatically handles the transition!

Next Steps

• Single Layouts - Explore individual page layouts
• Features - RSS, search, and more
• Advanced Topics - Complex hierarchies