Template:CS/products/card - Revision history

Wikilah admin at 13:47, 26 October 2025

2025-10-26T13:47:00Z

@@ Line 2: / Line 2: @@
 <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__cta">
 {{CS button

Wikilah admin at 13:13, 26 October 2025

2025-10-26T13:13:39Z

← Older revision		Revision as of 21:13, 26 October 2025
Line 11:		Line 11:
	}}		}}
	}}		}}
	\|{{#if:{{{link\|}}}
⚫	~~\|[[{{{link}}}\|~~<~~span~~ class="cs-product-~~card__placeholder~~" role="~~img~~" aria-~~label~~="{{{alt\|A CapSach product}}}"></~~span~~>]]
	\|{{#if:{{{url\|}}}
	\|[{{{url}}} <span class="cs-product-card__placeholder" role="img" aria-label="{{{alt\|A CapSach product}}}"></span>]
	\|<span class="cs-product-card__placeholder" role="img" aria-label="{{{alt\|A CapSach product}}}"></span>		\|<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="cs-product-card__cta">		<div class="cs-product-card__cta">
	{{CS button		{{CS button

Wikilah admin at 13:12, 26 October 2025

2025-10-26T13:12:44Z

← Older revision		Revision as of 21:12, 26 October 2025
Line 11:		Line 11:
	}}		}}
	}}		}}
			\|{{#if:{{{link\|}}}
		⚫	\|[[{{{link}}}\|<span class="cs-product-card__placeholder" role="img" aria-label="{{{alt\|A CapSach product}}}"></span>]]
			\|{{#if:{{{url\|}}}
			\|[{{{url}}} <span class="cs-product-card__placeholder" role="img" aria-label="{{{alt\|A CapSach product}}}"></span>]
	\|<span class="cs-product-card__placeholder" role="img" aria-label="{{{alt\|A CapSach product}}}"></span>		\|<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="cs-product-card__cta">		<div class="cs-product-card__cta">
	{{CS button		{{CS button

Wikilah admin at 12:53, 26 October 2025

2025-10-26T12:53:00Z

@@ Line 1: / Line 1: @@
 <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">
 </div>
-<div class="capsach-card__cta">{{CS button
+<div class="cs-product-card__cta">
-| text={{{button|Check out on Etsy}}}
+|text={{{button|Check out on Etsy}}}
-| width=100%
+|width=300px
-| align=left
+|align=left
 }}
-</pre>
+</div>

Wikilah admin at 09:04, 26 October 2025

2025-10-26T09:04:12Z

← Older revision		Revision as of 17:04, 26 October 2025
Line 2:		Line 2:
	<templatestyles src="CS/products/card/styles.css"/>		<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 capsach-align-{{#switch:{{lc:{{{align\|left}}}}}\|center=center\|right=right\|#default=left}}">
	<div class="capsach-card__media">		<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>
	<div class="capsach-~~card__media-inner~~">		<div class="capsach-card__cta">{{CS button
	{{#if:{{{img\|}}}
		⚫	\| url={{{url\|}}}
	\| [[File:{{{img}}}\|frameless\|alt={{{alt\|Product image}}}\|link={{#if:{{{link\|}}}\|{{{link}}}\|{{{url\|}}}}}]]
		⚫	\| link={{{link\|}}}
⚫	\| <div class="capsach-card__placeholder" role="img" aria-label="{{{alt\|Product image}}}"></div>
		⚫	\| text={{{button\|Check out on Etsy}}}
	}}
		⚫	\| mobile=full
	</div>
		⚫	\| width=100%
⚫	</div>
		⚫	\| align=left
	<div class="capsach-card__cta">{{CS button
		⚫	}}</div>
⚫	\| url={{{url\|}}}
⚫	\| link={{{link\|}}}
⚫	\| text={{{button\|Check out on Etsy}}}
⚫	\| mobile=full
⚫	\| width=100%
⚫	\| align=left
⚫	}}</div>
	</div>		</div>
	<noinclude>		<noinclude>
	{{Documentation}}		{{Documentation}}
	;Template: CS/products/card		;Template: CS/products/card
	~~Promo~~ card ~~with~~ Image → CTA button. ~~Title,~~ ~~badge~~ ~~and~~ ~~price~~ ~~have~~ ~~been~~ ~~removed~~.		Minimal promo card: Image → CTA button. Fixed width at 300px; media area uses a 2:3 (w:h) portrait frame.

	== Parameters ==		== Parameters ==
Line 43:		Line 37:

	== Behavior ==		== Behavior ==
	* Image links are created via the file syntax’s <code>link=</code> parameter; no ~~raw~~ ~~HTML~~ ~~anchors~~ are ~~used~~.		* 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.
	* 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 ==		== Example ==
Line 58:		Line 51:

	== Troubleshooting ==		== Troubleshooting ==
	* ~~Anchors~~ showing ~~as text~~: do not ~~use~~ raw <code><a></code> ~~in wikitext. This~~ template ~~uses~~ image <code>link=</code>.		* Anchor showing oddly: do not add raw <code><a></code>; the template sets the image link via <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~~.		* Image not full width: pass only the filename (no <code>File:</code> namespace) and no explicit size; CSS handles sizing/cropping.
	* No image available: omit <code>img</code> to get the neutral placeholder (still sized 2:3).
	</noinclude>		</noinclude>

Wikilah admin at 08:18, 26 October 2025

2025-10-26T08:18:54Z

Show changes

Wikilah admin: Created page with "

{{{title}}}

{{#if:{{{link|}}}{{{url|}}}||}} {{#i..."

2025-10-26T07:39:53Z

Created page with " <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__title" role="heading" aria-level="3" title="{{{title}}}">{{{title}}}</div> <div class="capsach-card__media"> {{#if:{{{link|}}}{{{url|}}}|<a class="capsach-card__media-link" href="{{#if:{{{link|}}}|{{fullurl:{{{link}}}}}|{{{url|}}}}}">|}} {{#i..."

New page

<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__title" role="heading" aria-level="3" title="{{{title}}}">{{{title}}}</div>
<div class="capsach-card__media">
{{#if:{{{link|}}}{{{url|}}}|<a class="capsach-card__media-link" href="{{#if:{{{link|}}}|{{fullurl:{{{link}}}}}|{{{url|}}}}}">|}}
{{#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>}}
<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>|}}
</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>