Partial Component

Collection Card

The Collection Card partial renders linked cards for items in collection lists. Unlike the manual card component, this always creates a clickable link to the item. It's commonly used in blog lists, article collections, and other content listings.

Manifest

{
  "name": "collection-card",
  "type": "_partials",
  "styles": ["collection-card.css"],
  "scripts": [],
  "requires": []
}

Configuration

All members of a collection must have an card object in their frontmatter.

card:
  title: 'Sample Article Title'
  author: 'John Doe'
  date: '2023-12-01'
  excerpt: 'Brief excerpt of the article content...'
  thumbnail: '/assets/images/article-thumb.jpg'
  pattern: ''

Configuration Options

During the build the target permalink will be merged with the card object.

Property	Type	Required	Description
`link`	string	Yes	Merged permalink
`title`	string	Yes	Card title text
`author`	string	No	Author name
`date`	string	No	Publication date
`excerpt`	string	No	Short description text
`thumbnail`	string	No	Thumbnail image URL
`pattern`	string	No	Background pattern class

Example

For a fully functional live exaple please see the sample blog.

Usage in Templates

{% from "components/_partials/collection-card/collection-card.njk" import collectionCard %}

<ul class="collection-list">
  {% for item in collection %}
    {% if loop.index > startPage and loop.index <= endPage %}
      <li
        class="collection-card{% if params.horizontal %} is-horizontal{% endif %}{% if item.card.pattern %} has-pattern{% endif %}"
        {% if item.card.pattern %}style="background: var(--{{ item.card.pattern }})"{% endif %}
      >
        {# Merge item permalink into card props for linking #}
        {% set item = item.card | merge({ link: item.permalink }) %}

        {{ collectionCard(item) }}
      </li>
    {% endif %}
  {% endfor %}
</ul>

Notes

Entire card acts as a clickable link
Optional metadata display with author-date partial
Proper ARIA labels for screen readers
Optional background patterns for visual variety