Partial Component
Manual Card
The Manual Card is a versatile card component that can display content with optional images, text, and CTAs. Unlike collection cards, this can be used standalone or as a non-linked card. It supports both horizontal and vertical layouts with flexible background options.
Manifest
{
"name": "manual-card",
"type": "_partials",
"styles": ["manual-card.css"],
"scripts": [],
"requires": ["text", "ctas", "image", "icon"]
}
Configuration
cards:
- link: ''
background:
hasImage: false
pattern: ''
isDark: false
image:
src: '/assets/images/sample8.jpg'
alt: ''
icon:
url: ''
icon: ''
title: ''
text:
leadIn: 'Image Decoration'
title: 'Full Text Section'
titleTag: 'h3'
subTitle: 'With Sub Title'
prose: |
Simple text section with markdown text and a single CTA.
ctas:
- url: '/library/'
label: 'Go to Library Page'
isButton: false
buttonStyle: 'primary'
Configuration Options
Property | Type | Required | Description |
---|---|---|---|
link | string | No | URL to make entire card clickable |
background | object | No | Background properties |
image | object | No | Image configuration object |
icon | string | No | Icon name for decoration |
text | object | No | Text content configuration |
ctas | array | No | Call-to-action buttons |
Example
Image Decoration
Full Text Section
With Sub Title
Simple text section with markdown text and a single CTA.
Usage in Templates
{% from "components/_partials/manual-card/manual-card.njk" import manualCard %}
{{ manualCard(section.cards) }}
Notes
- Vertical or horizontal orientations
- image or CSS pattern backgrounds
- Entire card can be clickable (CTAs ignored)