preview-card — image + title + meta + optional footer
Generic card for grid/list outputs. One template, many uses: product boxes, article previews, reference items, category tiles, team members. Optional badges over the image, optional footer for a price/CTA row, the whole card becomes a link if href is provided.
Pure SCSS — no JS.
Install
npx czg-ui add preview-card@import 'components/preview-card'; to app.scss. No JS.
Requires base.
Parameters
| Param | Type | Default | Notes | |
|---|---|---|---|---|
href | string\ | null | — | If set, the entire card is wrapped in <a> |
image | string\ | null | — | Image URL; omitted = card with no image |
alt | string | '' | Alt text for the image | |
title | string | — | Card heading (rendered as <h3>) | |
meta | string\ | null | — | Sub-line under the title (HTML allowed) |
badges | array | [] | [['text' => 'Novinka', 'modifier' => 'new'], …] overlaid on the image | |
footer | string\ | null | — | HTML content for the footer slot (price + button, …) |
class | string\ | null | — | Extra wrapper class |
Usage — product box
{include /app/components/Card/preview-card.latte,
href => $product->url,
image => $product->thumbUrl,
alt => $product->title,
title => $product->title,
meta => $product->shortDescription,
badges => [
['text' => 'Novinka', 'modifier' => 'new'],
['text' => '-20 %', 'modifier' => 'discount'],
],
footer => $latte->render('partials/product-footer.latte', ['p' => $product])}Usage — article teaser
{include /app/components/Card/preview-card.latte,
href => $article->url,
image => $article->coverImage,
title => $article->title,
meta => $article->publishedAt|date:'j. n. Y'}Badge modifiers
The modifier key adds preview-card__badge--{$modifier} class. Common values defined in SCSS: new, discount, sold-out, top. Add more in your project's _preview-card.scss override.
When NOT to use
- Single hero feature that should be visually distinct — design a
custom block, don't reuse the card pattern
- Tabular data with comparable values across rows — use a real
<table>