Manual Cards provide complete control over content and presentation. Unlike the collection-card which automatically displays collection items, the manual-card allows for custom combinations of images, text, icons, and CTAs with various layout options.
hasHorizontalCards: false # true for horizontal card layout
cards:
- link: ''
background:
hasImage: true
pattern: ''
isDark: false
image:
src: '/assets/images/sample8.jpg'
alt: ''
icon:
url: ''
icon: ''
title: ''
text:
leadIn: 'Condimentum Sollicitudin'
title: 'Text Only Section'
titleTag: 'h3'
subTitle: 'Ornare Malesuada Ipsum'
prose: 'Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.'
ctas:
- url: ''
label: ''
isButton: true
buttonStyle: 'primary'
# other manual cards
| Property | Type | Description |
|---|---|---|
link | string | Makes entire card clickable |
background | object | background properties |
image | object | Image configuration |
icon | string | Icon name to display |
text | object | Text content (title, prose) |
ctas | array | Call-to-action buttons |
classes | string | Custom CSS classes |
isHorizontal | boolean | Render horizontal layout |
| Property | Type | Description |
|---|---|---|
hasImage | boolean | Use image as card background |
pattern | string | Pattern name for background |
isDark | boolean | Set according to background shade |
Standard card configurations with image, text, and CTA combinations.
Image Decoration
With Sub Title
Simple text section with markdown text and a single CTA.
Icon Decoration
With Sub Title
Simple text section with markdown text and a single CTA.
Image Decoration
With Sub Title
Simple text section, markdown text, inline link and an single CTA.
Icon Decoration
With Sub Title
Text restricted to three lines.Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor.
Cards can use images or CSS patterns as full backgrounds with content overlays. When hasImageBackground is true, the image spans the entire card as a background layer.
This creates visually striking cards perfect for featured content, hero sections, or any design that benefits from rich imagery with text overlays.
Background Image
With Sub Title
More text. Seven lines enforced in CSS, but you can make this more!. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.
Background CSS Pattern
With Sub Title
Simple text section with markdown text and a couple of bottons.
Background Image
With Sub Title
Simple text section, markdown text, inline link and an single CTA. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Background CSS Pattern
With Sub Title
More text. Seven lines enforced in CSS, but you can make this more!. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.
When a link property is provided, the entire card becomes clickable and wraps in an anchor tag. In this mode, individual CTAs are ignored since the whole card acts as a single link. This is perfect for navigation cards or content previews.
Image Decoration
With Sub Title
Click anywhere on this card to navigate to the Hero component page.
Image Decoration
With Sub Title
Click anywhere on this card to navigate to the Hero Slider component page.
Background CSS Pattern
With Sub Title
Click anywhere on this card to navigate to the Flip Cards component page.
Background CSS Pattern
With Sub Title
Click anywhere on this card to navigate to the Siomple Accordion component page.
For a horizontal card layout all that is needed, set the isHorizontal: true.
Image Decoration
With Sub Title
Click anywhere on this card to navigate to the Hero component page.
Image Decoration
With Sub Title
Click anywhere on this card to navigate to the Hero Slider component page.
Background CSS Pattern
With Sub Title
Click anywhere on this card to navigate to the Flip Cards component page.
Background CSS Pattern
With Sub Title
Click anywhere on this card to navigate to the Simple Accordion component page.