|
<!-- 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-product- card__mediacard"> <div class="cs-product-card__media">[[File:{{#if:{{{img|}}}|{{{img}}}|Work-in-progress-book.jpg}}|class=cs-product-card__img|300px|link={{#if:{{{link|}}}|{{{link}}}|{{#if:{{{url|}}}|{{{url}}}|}}}}]]</div>
<span class="capsach-card__ratio"></span>
<div class=" capsachcs- card__mediaproduct- innercard__cta"> {{CS button
{{#if:{{{img|}}}
| text={{{button|Check out on Etsy}}} ▼ | [[File:{{{img}}}|frameless|alt={{{alt|Product image}}}|link={{#if:{{{link|}}}|{{{link}}}|{{{url|}}}}}]]
| <div class="capsach-card__placeholder" role="img" aria-label="{{{alt|Product image}}}"></div>
|url={{#if:{{{link|}}}||{{{url|}}}}}
}}
<div class="capsach-card__cta">{{CS button
| url={{{url|}}}
▲ | text={{{button|Check out on Etsy}}}
| mobile=full
}}</div>
</div>
<noinclude>
{{Documentation}}
;Template: CS/products/card
Promo card with **Image → CTA button**. Title, badge and price have been removed.
== 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; 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 <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).
== Example ==
<pre>
{{CS/products/card
| url=https://etsy.com/
| img=AtomicHabits.png
| button=Check out on Etsy
}}
</prediv>
== Troubleshooting ==
* **Anchors showing as text**: do not use raw <code><a></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 image available**: omit <code>img</code> to get the neutral placeholder (still sized 2:3).
</noinclude>
|