Template:CS/products/card: Difference between revisions

Browse history interactively

Newer edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 16:18, 26 October 2025

Check out on Etsy

Template: CS/products/card

Promo card with **Image → CTA button**. Title, badge and price have been removed.

Parameters

Parameter	Required	Default	Notes
`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:`). If missing, a neutral placeholder is shown.
`button`	no	`Check out on Etsy`	CTA button text (passed to {{CS button}}).
`align`	no	`left`	One of `left` · `center` · `right`.
`alt`	no	`Product image`	Alt text for accessibility.

Behavior

Image links are created via the file syntax’s link= parameter; no raw HTML anchors are used.
Card is 100% width on mobile and up to 480px on larger screens.
Media area enforces a **2:3 (w:h) aspect ratio**; the image fills and crops as needed.
If neither link nor url is provided, media is non‑clickable and the CTA renders as a non‑link (per {{CS button}} behavior).

Example

{{CS/products/card
 | url=https://etsy.com/
 | img=AtomicHabits.png
 | button=Check out on Etsy
}}

Troubleshooting

**Anchors showing as text**: do not use raw <a> in wikitext. This template uses image link=.
**Image not full width**: ensure your image param is just the filename (no File:) and do not pass fixed sizes; CSS scales it to the card width.
**No image available**: omit img to get the neutral placeholder (still sized 2:3).

@@ Line 2: / Line 2: @@
 <templatestyles src="CS/products/card/styles.css"/>
 <div class="capsach-card capsach-align-{{#switch:{{lc:{{{align|left}}}}}|center=center|right=right|#default=left}}">
-<div class="capsach-card__title" role="heading" aria-level="3" title="{{{title}}}">{{{title}}}</div>
+  <div class="capsach-card__media">
-<div class="capsach-card__media">
+    <span class="capsach-card__ratio"></span>
-{{#if:{{{link|}}}{{{url|}}}|<a class="capsach-card__media-link" href="{{#if:{{{link|}}}|{{fullurl:{{{link}}}}}|{{{url|}}}}}">|}}
+    <div class="capsach-card__media-inner">
+      {{#if:{{{img|}}}
-{{#if:{{{img|}}}|[[File:{{{img}}}|class=capsach-card__img|frameless|alt={{{alt|{{{title}}}}}}|link=]]|<div class="capsach-card__placeholder" role="img" aria-label="{{{alt|{{{title}}}}}}"></div>}}
+        | [[File:{{{img}}}|frameless|alt={{{alt|Product image}}}|link={{#if:{{{link|}}}|{{{link}}}|{{{url|}}}}}]]
-<div class="capsach-card__overlay"><span class="capsach-chip capsach-chip--badge" title="{{{badge|Instant download}}}"><span class="capsach-chip__text">{{{badge|Instant download}}}</span></span><span class="capsach-chip capsach-chip--price" title="{{{price|$1.9}}}"><span class="capsach-chip__text">{{{price|$1.9}}}</span></span></div>
+        | <div class="capsach-card__placeholder" role="img" aria-label="{{{alt|Product image}}}"></div>
-{{#if:{{{link|}}}{{{url|}}}|</a>|}}
+      }}
-</div>
+    </div>
-<div class="capsach-card__cta">{{CS button
+  </div>
-| url={{{url|}}}
+  <div class="capsach-card__cta">{{CS button
-| link={{{link|}}}
-| text={{{button|Check out on Etsy}}}
+  | url={{{url|}}}
+  | link={{{link|}}}
-| mobile=full
+  | text={{{button|Check out on Etsy}}}
-| width=100%
+  | mobile=full
-| align=left
+  | width=100%
-}}</div>
+  | align=left
+  }}</div>
 </div>
 <noinclude>
 {{Documentation}}
 ;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**.
+Promo card with **Image → CTA button**. Title, badge and price have been removed.
 == Parameters ==
 {| class="wikitable"
 ! Parameter !! Required !! Default !! Notes
-|-
-| <code>title</code> || yes || — || Product title; also used as default <code>alt</code>.
 |-
 | <code>url</code> || yes* || — || External URL. Required unless <code>link</code> is provided.
@@ Line 33: / Line 33: @@
 | <code>link</code> || no || — || Internal wiki link. If set, it takes precedence over <code>url</code>.
 |-
-| <code>img</code> || no || — || Image filename (without <code>File:</code>).
+| <code>img</code> || no || — || Image filename (without <code>File:</code>). If missing, a neutral placeholder is shown.
-|-
-| <code>price</code> || no || <code>$1.9</code> || Short label shown on the image (chip).
-|-
-| <code>badge</code> || no || <code>Instant download</code> || Short label shown on the image (chip).
 |-
-| <code>button</code> || no || <code>Check out on Etsy</code> || CTA button text.
+| <code>button</code> || no || <code>Check out on Etsy</code> || CTA button text (passed to {{tl|CS button}}).
 |-
-| <code>align</code> || no || <code>left</code> || One of <code>left</code> · <code>center</code> · <code>right</code>. Default output remains left-aligned.
+| <code>align</code> || no || <code>left</code> || One of <code>left</code> · <code>center</code> · <code>right</code>.
 |-
-| <code>alt</code> || no || <code>title</code> || Alt text for the image.
+| <code>alt</code> || no || <code>Product image</code> || Alt text for accessibility.
 |}
 == Behavior ==
-* Media area links to <code>link</code> (preferred) or <code>url</code>. If neither is provided, it is non-clickable.
+* Image links are created via the file syntax’s <code>link=</code> parameter; no raw HTML anchors are used.
+* Card is 100% width on mobile and up to 480px on larger screens.
-* Missing <code>img</code>: shows a neutral placeholder with the same overlay zone.
+* Media area enforces a **2:3 (w:h) aspect ratio**; the image fills and crops as needed.
-* Overlong <code>title</code>, <code>badge</code>, or <code>price</code> truncate with ellipsis; full text available via the <code>title</code> attribute.
+* If neither <code>link</code> nor <code>url</code> is provided, media is non‑clickable and the CTA renders as a non‑link (per {{tl|CS button}} behavior).
-* Width: 100% on mobile; max-width 480px on larger screens.
-* CTA uses {{tl|CS button}} with <code>mobile=full</code> and <code>width=100%</code>.
 == Example ==
 <pre>
 {{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
 }}
@@ Line 66: / Line 58: @@
 == Troubleshooting ==
-* **Image not showing**: pass the filename without <code>File:</code> (e.g., <code>MyImage.png</code>).
+* **Anchors showing as text**: do not use raw <code>&lt;a&gt;</code> in wikitext. This template uses image <code>link=</code>.
+* **Image not full width**: ensure your image param is just the filename (no <code>File:</code>) and do not pass fixed sizes; CSS scales it to the card width.
-* **No link**: supply either <code>link</code> (internal) or <code>url</code> (external).
+* **No image available**: omit <code>img</code> to get the neutral placeholder (still sized 2:3).
-* **Alignment**: if you pass an unsupported value, it falls back to <code>left</code>.
-* **CTA**: when both <code>link</code> and <code>url</code> are empty, {{tl|CS button}} renders a non-link “button-like” span.
 </noinclude>