|
<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__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> }}▼ <span class="capsach-card__ratio"></span>
<div class="capsach- card__media-innercard__cta"> {{CS button {{#if:{{{img|}}}
| [[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>
| text={{{button|Check out on Etsy}}} ▼ }}
</div>
<div class="capsach-card__cta">{{CS button
▲ | text={{{button|Check out on Etsy}}}
</div>
<noinclude>
{{Documentation}}
;Template: CS/products/card
PromoMinimal promo card with: **Image → CTA button**. Title,Fixed width at 300px; media area badgeuses anda price2:3 have(w:h) beenportrait removedframe.
== Parameters ==
== Behavior ==
* Image links are created via the file syntax’s <code>link=</code> parameter; no(internal rawlink HTMLpreferred anchorsover external). If both are usedempty, 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.
* Card is 100% width on mobile and up to 480px on larger screens.
* CTA uses {{tl|CS button}} with <code>mobile=full</code> and <code>width=100%</code>.
* 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 ==
== Troubleshooting ==
* **AnchorsAnchor showing as textoddly**: do not useadd raw <code><a></code>; in wikitext. Thisthe template usessets the image link via <code>link=</code>.
* **Image not full width**: ensure your image param ispass justonly the filename (no <code>File:</code> namespace) and dono notexplicit pass fixed sizessize; CSS scaleshandles it to the card widthsizing/cropping.
* **No image available**: omit <code>img</code> to get the neutral placeholder (still sized 2:3).
</noinclude>
|