Template:CS/products/card: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<!-- 1) Template:CS/products/card --> |
|||
<templatestyles src="CS/products/card/styles.css"/> |
<templatestyles src="CS/products/card/styles.css"/> |
||
<div class="capsach- |
<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="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="cs-product-card__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> |
|||
|url={{#if:{{{link|}}}||{{{url|}}}}} |
|||
}} |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
<div class="capsach-card__cta">{{CS button |
|||
| url={{{url|}}} |
|||
| ⚫ | |||
| ⚫ | |||
| 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 |
|||
}} |
}} |
||
</ |
</div> |
||
| ⚫ | |||
| ⚫ | |||
== 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> |
|||
Latest revision as of 21:47, 26 October 2025
Check out on Etsy