How do I add the Collection block to a Hugo site?

Add a "block: collection" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the Collection block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the Collection block?

Yes. It exposes 25 content options, plus 6 design options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the Collection block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/collection

ContentFree · MITHugo

Collection block

Query, filter, sort, and paginate any Markdown content — blog posts, publications, projects — into a styled grid or list.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.1.0Version

25Options

MITLicense

Quick start

Add the Collection block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: collection
  content:
    title: Latest research notes
    text: Fresh from the lab notebook.
    count: 6
    page_type: post
    sort_by: Date
    sort_ascending: false
    filters:
      folders:
        - post
      tags:
        - alignment
        - evaluations
      featured_only: true
    archive:
      enable: true
      text: All posts
      link: /post/
  design:
    view: card
    columns: 3
    fill_image: true
    show_date: true
    show_read_time: true
    show_read_more: true

Overview

About the Collection block

Transform your content into stunning, organized displays

The Collection block is your ultimate content curation tool, designed to showcase your blog posts, publications, projects, or any content type in beautifully organized, filterable displays.

✨ Key Features

Smart Filtering: Filter by folders, tags, categories, authors, publication types, and more
Flexible Sorting: Sort by date, title, or any custom field in ascending or descending order
Multiple Views: Choose from card, compact, showcase, citation, list, or masonry layouts
Pagination Ready: Built-in support for limiting items and pagination
Archive Integration: Automatic "See All" links to full archive pages
Responsive Design: Perfectly optimized for all screen sizes

🎯 Perfect For

Blog Showcases: Display your latest blog posts with beautiful card layouts
Publication Lists: Showcase academic papers and research with citation views
Project Galleries: Present your portfolio work in stunning visual grids
News & Updates: Keep visitors informed with filtered content streams
Content Archives: Create organized content hubs by topic or category

🚀 Why Choose Collection Block?

Effortless Content Management: No manual updates needed - your content automatically appears as you publish

Advanced Filtering: Powerful filtering system that works with Hugo's built-in taxonomies and custom parameters

SEO Optimized: Clean markup and semantic HTML structure for better search engine visibility

Performance First: Lightweight and fast, with optimized queries and lazy loading support

📊 Use Cases

Academic portfolios showcasing publications by research area
Corporate blogs with category-based content organization
Creative portfolios with project filtering by type or client
News sites with topic-based content streams
Personal blogs with tag-based content discovery

Start building engaging content displays that keep your visitors exploring and discovering more of what you have to offer.

Flexibility

Layouts & variants

Switch the block's design with these presets — no custom CSS.

viewDisplay view type. 'card' shows full cards with images, 'compact' shows minimal list items, 'showcase' highlights featured content, 'citation' for academic publications, 'article-grid' for blog layouts.

carddefaultcompactshowcasecitationlistmasonryarticle-griddate-title-summaryslides-gallery

Reference

Configuration

Every option the Collection block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`title`	`string`	—	Section title (supports Markdown)
`text`	`string`	—	Section description (supports Markdown)
`count`	`integer`	5	Maximum number of items to display (0 means unlimited)
`offset`	`integer`	0	Number of items to skip from the start of the query
`page_type`	`string`	—	Filter by page type/section (e.g., 'post', 'publication')
`sort_by`	`Date \| date \| Title \| title \| Weight \| weight \| Lastmod \| lastmod \| PublishDate \| publishdate`	Date	Field to sort by
`sort_ascending`	`boolean`	false	Sort in ascending order
`order`	`asc \| desc`	—	Sort order (alternative to sort_ascending)
`filters`	`object`	—	Content filtering options
`filters.kinds`	`string[]`	page	Limit to Hugo page kinds
`filters.folders`	`string[]`	—	Filter by content folders/sections
`filters.tags`	`string[]`	—	Filter by multiple tags (intersection)
`filters.tag`	`string`	—	Filter by a single tag
`filters.category`	`string`	—	Filter by category
`filters.publication_type`	`string`	—	Filter by publication type
`filters.exclude_publication_type`	`string`	—	Exclude specific publication type
`filters.author`	`string`	—	Filter by author
`filters.featured_only`	`boolean`	false	Show only featured content
`filters.exclude_featured`	`boolean`	false	Exclude featured content
`filters.exclude_past`	`boolean`	false	Exclude past-dated content
`filters.exclude_future`	`boolean`	false	Exclude future-dated content
`archive`	`object`	—	Archive link configuration
`archive.enable`	`boolean`	—	Show archive link even when item count is below limit
`archive.link`	`string`	—	Override archive URL (defaults to derived archive page)
`archive.text`	`string`	—	Override archive link text

Design options

Properties set under the block's design key — shared background, spacing, and color settings apply on top.

Property	Type	Default	Description
`view`	`card \| compact \| showcase \| citation \| list \| masonry \| article-grid \| date-title-summary \| slides-gallery`	card	Display view type. 'card' shows full cards with images, 'compact' shows minimal list items, 'showcase' highlights featured content, 'citation' for academic publications, 'article-grid' for blog layouts.
`columns`	`integer`	2	Number of columns when using grid-based views (1-4)
`fill_image`	`boolean`	true	Fill cards with cover images when available
`show_date`	`boolean`	true	Display published/modified date when available
`show_read_time`	`boolean`	true	Display estimated reading time when available
`show_read_more`	`boolean`	true	Show a read more link on cards

Compose

Works well with

Blocks that pair naturally with Collection on the same page.

Hero Portfolio

Frequently asked

Collection block FAQ

Add a "block: collection" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the Collection block?

Customize with AI View source