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:
-
This page has
page-layout: manualsandpage-tags: catalog-example,catalog -
Child pages reference this catalog with
parent-catalogs: catalog-example -
The layout automatically finds and displays matching pages as cards
-
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-gearfor 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.
