|
<!-- 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">
{{#if:{{{img|}}}|[[File:{{{img}}}|class=capsach-card__img|frameless|alt={{{alt|Product image}}}|link={{{link|{{{url|}}}}}}]]|<div class="capsach-card__placeholder" role="img" aria-label="{{{alt|Product image}}}"></div>}}
{{#if:{{{img|}}}
| link={{#if:{{{link|}}} ▼|[[File:{{{img}}}|class=cs-product-card__img|alt={{{alt|A CapSach product}}}|link={{{link}}}|300px]]
|[{{{url}}} [[File:{{{img}}}|class=cs-product-card__img|alt={{{alt|A CapSach product}}}|link=|300px]]]
|[[File:{{{img}}}|class=cs-product-card__img|alt={{{alt|A CapSach product}}}|link=|300px]]
}}
|<span class="cs-product-card__placeholder" role="img" aria-label="{{{alt|A CapSach product}}}"></span>
}}
</div>
<div class="cs-product-card__title" role="heading" aria-level="2">{{{alt|A CapSach product}}}</div>
<div class="capsachcs-product-card__cta">{{CS button
{{CS button
| text={{{button|Check out on Etsy}}}
|link={{{link|}}}
| mobile=full
|url={{#if:{{{link|}}}||{{{url|}}}}}
| width=100%300px
| align=left
<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
}}
</prediv>
== 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>
|