Catalog Example

This page demonstrates the manuals layout functioning as a catalog. It automatically displays cards for all pages that have this page listed in their parent-catalogs attribute.

1. How It Works

The catalog layout uses the following mechanism:

  1. This page has page-layout: manuals and page-tags: catalog-example,catalog

  2. Child pages reference this catalog with parent-catalogs: catalog-example

  3. The layout automatically finds and displays matching pages as cards

  4. Cards show the page title, description, and illustration (Font Awesome icon or image)

2. Card Generation

Cards are generated for pages with: - parent-catalogs: catalog-example (matching this page’s primary tag) - Appropriate page-tags that match the page-cards-tag criteria - Valid description and page-illustration attributes for display

3. Visual Features

Font Awesome Icons

Pages can use Font Awesome classes like fa-solid fa-gear for illustrations

Image Support

Traditional images are also supported using standard Antora image references

Responsive Design

Cards automatically adapt to different screen sizes

Hover Effects

Interactive feedback when hovering over cards

The child pages below demonstrate different illustration types and content organization patterns.