Template:CS/products/card

{{{title}}}

Instant download$1.9

Check out on Etsy

Template: CS/products/card

A reusable promo card for external products (e.g., Etsy). Renders: **Title → Image (with bottom overlay for badge + price) → CTA button**.

Parameters

Parameter	Required	Default	Notes
`title`	yes	—	Product title; also used as default `alt`.
`url`	yes*	—	External URL. Required unless `link` is provided.
`link`	no	—	Internal wiki link. If set, it takes precedence over `url`.
`img`	no	—	Image filename (without `File:`).
`price`	no	`$1.9`	Short label shown on the image (chip).
`badge`	no	`Instant download`	Short label shown on the image (chip).
`button`	no	`Check out on Etsy`	CTA button text.
`align`	no	`left`	One of `left` · `center` · `right`. Default output remains left-aligned.
`alt`	no	`title`	Alt text for the image.

Behavior

Media area links to link (preferred) or url. If neither is provided, it is non-clickable.
Missing img: shows a neutral placeholder with the same overlay zone.
Overlong title, badge, or price truncate with ellipsis; full text available via the title attribute.
Width: 100% on mobile; max-width 480px on larger screens.
CTA uses {{CS button}} with mobile=full and width=100%.

Example

{{CS/products/card
 | title=Atomic Habits Cheat Sheet
 | url=https://etsy.com/
 | img=AtomicHabits.png
 | price=$1.9
 | badge=Instant download
 | button=Check out on Etsy
}}

Troubleshooting

**Image not showing**: pass the filename without File: (e.g., MyImage.png).
**No link**: supply either link (internal) or url (external).
**Alignment**: if you pass an unsupported value, it falls back to left.
**CTA**: when both link and url are empty, {{CS button}} renders a non-link “button-like” span.