EN

Section Component

Related Posts

A section that renders a curated list of items from any collection. It has two presentation modes: a compact text list (default) or a grid of cards (hasCard: true). Designed to sit at the end of a blog post, reference page, or any content item and point readers at a hand-picked set of further reading.

How It Works

The author lists the slugs of items to include in theselectionsarray. The component iterates every registered collection (blog,sections,partials, etc.) and resolves each slug to the first matching item. Order is preserved as written — this is a curation component, not an automated "similar content" feed.

If a slug does not match any item, it is silently skipped. If none of the selections resolve, the component renders nothing at all.

Text List (Default)

The default presentation — a dense, minimal<ul>with title, description, and link. Best for end-of-article "further reading" lists where density matters more than visual weight.

Card Grid

SethasCard: trueto render the same selections as a grid of cards. Each card pulls its thumbnail, title, description, author, and date from the target item'scardobject. Best when the section stands on its own and benefits from visual anchoring — for example, a "You might also like" block on an index or landing page.

- sectionType: related-posts
  hasCard: true
  selections:
    - building-pages-with-components
    - section-anatomy
    - how-component-bundling-works

Mixed Collections

The component is not tied to any single collection. It resolves each slug against every registered collection, so an author can mix a blog post, a section reference, and a partial reference in one block without specifying which collection each slug belongs to. The first collection containing a match wins, so a slug is never rendered twice.

Below is a singlerelated-postssection pulling two blog slugs and one section-reference slug.

Configuration

PropertyTypeRequiredDescription
sectionTypestringYesMust berelated-posts
selectionsarrayYesSlugs (last permalink segment) of items to list, in display order
hasCardbooleanNoRender as cards instead of a text list. Defaults tofalse
textobjectNoOptional heading block — standardtextpartial props
isDisabledbooleanNoHide the section entirely
containerFieldsobjectNoStandard container configuration

Notes

  • Each entry inselectionsis the last segment of the target item's permalink. For a blog post atsrc/blog/section-anatomy.md, the slug issection-anatomy.
  • Items render in the order listed inselections, not in any collection's natural sort order.
  • Unmatched slugs are silently skipped; if none resolve, the section renders nothing.
  • In card mode, the thumbnail falls back fromcard.thumbnail(blog convention) tocard.image(reference-page convention), so cards work uniformly across collections.
  • Text-list entries readpost.card.title/post.card.descriptionwhen present, falling back to top-levelblogTitle(ortitle) andexcerpt. The text list works on projects that don't use thecardconvention.
  • IfhasCard: trueis set but any resolved post is missing itscardobject, the section falls back to the text list rather than rendering partial cards.