| name | cards |
| description | Render Neko Card and card-grid blocks — content tiles with optional image, icon, title, tags, link, and palette. Use for landing pages, feature grids, navigation hubs. |
Cards
Cards are flexible content tiles. They support multiple layouts (stacked,
horizontal, grid, link) and can be combined into a card-grid for responsive
multi-column layouts.
Single card
::: card { image="/assets/photo.jpg" title="Photo" tags="landscape, nature" }
Beautiful sunset photo.
:::
Card variants
variant | Description |
|---|
| (default) | Stacked card with optional image at top. |
horizontal | Image on the side, content next to it. |
grid | Compact tile suitable for a card grid (use icon or small image). |
link | Renders as a clickable card with title + description. |
Attributes
| Attribute | Description |
|---|
image | Path/URL to an image displayed on the card. |
icon | UIcon name, :emoji:, <svg>, or image path (alternative to image). |
title | Card heading. |
tags | Comma-separated tag list rendered as small badges. |
link | Makes the card clickable. |
target | blank, self, parent, top for the link. |
palette | Named colour palette (blue, green, red, etc.) for grid variant. |
variant | One of the variants above. |
Card grid
:::: card-grid
::: card { variant="grid" icon="rocket" title="Get started" link="/guides/getting-started" palette="blue" }
Install Neko and run your first build.
:::
::: card { variant="grid" icon="cube" title="Components" link="/components/components" palette="green" }
The complete component reference.
:::
::: card { variant="grid" icon="palette" title="Themes" link="/guides/themes" palette="purple" }
Customise the look of your site.
:::
::::
Notes:
:::: (four colons) opens the grid container; ::: (three colons) opens
each card inside it.- Cards inside a grid should use
variant="grid" for consistent sizing.
- The grid is responsive — cards reflow to one column on mobile.
When to use Cards
- Landing pages and section index pages.
- Feature comparisons.
- Navigation hubs (e.g. a docs root listing major sections).
For a small inline link, prefer reference-link;
for a primary action, prefer button.
