Template:CS/products/card: Difference between revisions

Browse history interactively

← Older edit

Content deleted Content added

VisualWikitext

Inline

Latest revision as of 21:47, 26 October 2025

Check out on Etsy

@@ Line 1: / Line 1: @@
-<!-- 1) Template:CS/products/card -->
 <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-align capsach-align-{{#switch:{{lc:{{{align|left}}}}}|center=center|right=right|left=left|#default=left}}">
-<div class="capsach-card__media">
+<div class="cs-product-card">
-{{#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>}}
+<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>
+<div class="cs-product-card__cta">
+{{CS button
+|text={{{button|Check out on Etsy}}}
+|link={{{link|}}}
+|url={{#if:{{{link|}}}||{{{url|}}}}}
+|width=300px
+|align=left
+}}
+</div>
 </div>
-<div class="capsach-card__cta">{{CS button
-| url={{{url|}}}
-| link={{{link|}}}
-| text={{{button|Check out on Etsy}}}
-| mobile=full
-| width=100%
-| align=left
-}}</div>
 </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>&lt;a&gt;</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>