|
<!-- 1) Template:CS/products/card -->
<templatestyles src="CS/products/card/styles.css"/>
<div class="capsach-cardalign capsach-align-{{#switch:{{lc:{{{align|left}}}}}|center=center|right=right|left=left|#default=left}}">
<div class="capsachcs-card__mediaproduct-card">
<div class="cs-product-card__media">[[File:{{#if:{{{img|}}}|[[File:{{{img}}}|Work-in-progress-book.jpg}}|class=capsachcs-product-card__img|frameless300px|altlink={{#if:{alt{{link|Product image}}}|link={{{link}}}|{{#if:{{{url|}}}}}}]]|<div class="capsach-card__placeholder" role="img" aria-label="{{{alturl}}}|Product image}}}">}]]</div>}}
<div class=" capsachcs-product-card__cta"> {{CS button▼{{CS button
| text={{{button|Check out on Etsy}}} ▼| url= {{#if:{{{link|}}}||{{{url| }}}}} ▼</div>
▲<div class="capsach-card__cta">{{CS button
▲| text={{{button|Check out on Etsy}}}
| mobile=full
</div>
<noinclude>
{{Documentation}}
;Template: CS/products/card
Minimal promo card: **Image → CTA button**. Fixed width at 300px; media area uses a 2:3 (w:h) portrait frame.
== Parameters ==
{| class="wikitable"
! Parameter !! Required !! Default !! Notes
|-
| <code>url</code> || yes* || — || External URL. Required unless <code>link</code> is provided.
|-
| <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>). If missing, a neutral placeholder is shown.
|-
| <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>.
|-
| <code>alt</code> || no || <code>Product image</code> || Alt text for accessibility.
|}
== Behavior ==
* Image links are created via the file syntax’s <code>link=</code> parameter (internal link preferred over external). If both are empty, the image is non‑clickable.
* Card width is fixed at 300px; media area is 450px tall (2:3). The image fills the frame and crops as needed.
* CTA uses {{tl|CS button}} with <code>mobile=full</code> and <code>width=100%</code>.
== Example ==
<pre>
{{CS/products/card
| url=https://etsy.com/
| img=AtomicHabits.png
| button=Check out on Etsy
</pre>
== Troubleshooting ==
* **Anchor showing oddly**: do not add raw <code><a></code>; the template sets the image link via <code>link=</code>.
* **Image not full width**: pass only the filename (no <code>File:</code> namespace) and no explicit size; CSS handles sizing/cropping.
</noinclude>
|