Template:CS/products/card: Difference between revisions

Browse history interactively

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="cs-product-card">
-<div class="capsach-card__title" role="heading" aria-level="3" title="{{{title}}}">{{{title}}}</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="capsach-card__media">
+<div class="cs-product-card__cta">
-{{#if:{{{link|}}}{{{url|}}}|<a class="capsach-card__media-link" href="{{#if:{{{link|}}}|{{fullurl:{{{link}}}}}|{{{url|}}}}}">|}}
+{{CS button
-{{#if:{{{img|}}}|[[File:{{{img}}}|class=capsach-card__img|frameless|alt={{{alt|{{{title}}}}}}|link=]]|<div class="capsach-card__placeholder" role="img" aria-label="{{{alt|{{{title}}}}}}"></div>}}
+|text={{{button|Check out on Etsy}}}
-<div class="capsach-card__overlay"><span class="capsach-chip capsach-chip--badge" title="{{{badge|Instant download}}}"><span class="capsach-chip__text">{{{badge|Instant download}}}</span></span><span class="capsach-chip capsach-chip--price" title="{{{price|$1.9}}}"><span class="capsach-chip__text">{{{price|$1.9}}}</span></span></div>
-{{#if:{{{link|}}}{{{url|}}}|</a>|}}
+|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
-A reusable promo card for external products (e.g., Etsy). Renders: **Title → Image (with bottom overlay for badge + price) → CTA button**.
-== Parameters ==
-{| class="wikitable"
-! Parameter !! Required !! Default !! Notes
-|-
-| <code>title</code> || yes || — || Product title; also used as default <code>alt</code>.
-|-
-| <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>).
-|-
-| <code>price</code> || no || <code>$1.9</code> || Short label shown on the image (chip).
-|-
-| <code>badge</code> || no || <code>Instant download</code> || Short label shown on the image (chip).
-|-
-| <code>button</code> || no || <code>Check out on Etsy</code> || CTA button text.
-|-
-| <code>align</code> || no || <code>left</code> || One of <code>left</code> · <code>center</code> · <code>right</code>. Default output remains left-aligned.
-|-
-| <code>alt</code> || no || <code>title</code> || Alt text for the image.
-|}
-== Behavior ==
-* Media area links to <code>link</code> (preferred) or <code>url</code>. If neither is provided, it is non-clickable.
-* Missing <code>img</code>: shows a neutral placeholder with the same overlay zone.
-* Overlong <code>title</code>, <code>badge</code>, or <code>price</code> truncate with ellipsis; full text available via the <code>title</code> attribute.
-* Width: 100% on mobile; max-width 480px on larger screens.
-* CTA uses {{tl|CS button}} with <code>mobile=full</code> and <code>width=100%</code>.
-== Example ==
-<pre>
-{{CS/products/card
- | title=Atomic Habits Cheat Sheet
- | url=https://etsy.com/
- | img=AtomicHabits.png
- | price=$1.9
- | badge=Instant download
- | button=Check out on Etsy
-}}
-</pre>
-== Troubleshooting ==
-* **Image not showing**: pass the filename without <code>File:</code> (e.g., <code>MyImage.png</code>).
-* **No link**: supply either <code>link</code> (internal) or <code>url</code> (external).
-* **Alignment**: if you pass an unsupported value, it falls back to <code>left</code>.
-* **CTA**: when both <code>link</code> and <code>url</code> are empty, {{tl|CS button}} renders a non-link “button-like” span.
-</noinclude>