Template:CS/products/card: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| 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=" |
<div class="cs-product-card"> |
||
<div class="cs-product-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>}} |
|||
{{#if:{{{img|}}} |
|||
| ⚫ | |||
|[[File:{{{img}}}|class=cs-product-card__img|alt={{{alt|A CapSach product}}}|link={{{link}}}|300px]] |
|||
| ⚫ | |||
|[{{{url}}} [[File:{{{img}}}|class=cs-product-card__img|alt={{{alt|A CapSach product}}}|link=|300px]]] |
|||
|[[File:{{{img}}}|class=cs-product-card__img|alt={{{alt|A CapSach product}}}|link=|300px]] |
|||
| ⚫ | |||
}} |
|||
|<span class="cs-product-card__placeholder" role="img" aria-label="{{{alt|A CapSach product}}}"></span> |
|||
}} |
|||
</div> |
</div> |
||
<div class="cs-product-card__title" role="heading" aria-level="2">{{{alt|A CapSach product}}}</div> |
|||
<div class=" |
<div class="cs-product-card__cta"> |
||
| ⚫ | |||
{{CS button |
|||
| ⚫ | |||
| |
|text={{{button|Check out on Etsy}}} |
||
|link={{{link|}}} |
|||
| mobile=full |
|||
|url={{#if:{{{link|}}}||{{{url|}}}}} |
|||
| |
|width=300px |
||
| |
|align=left |
||
| ⚫ | |||
| ⚫ | |||
<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 |
|||
}} |
}} |
||
</ |
</div> |
||
| ⚫ | |||
| ⚫ | |||
== Troubleshooting == |
|||
* **Anchor showing oddly**: do not add raw <code><a></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> |
|||
Revision as of 20:53, 26 October 2025
A CapSach product
Check out on Etsy