Insurer Brain

Template:CS/products/card: Difference between revisions

Browse history interactively
Newer edit →
Content deleted Content added
VisualWikitext
Created page with "<!-- 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-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..."
 
No edit summary
Line 2:
<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__titlecard__media" role="heading" aria-level="3" title="{{{title}}}">{{{title}}}</div>
<divspan class="capsach-card__mediacard__ratio"></span>
{{#if:{{{link|}}}{{{url|}}}| <adiv class="capsach-card__media-link" href="{{#if:{{{link|}}}|{{fullurl:{{{link}}}}}|{{{url|}}}}}inner">|}}
{{#if:{{{img|}}}
{{#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>}}▼
| [[File:{{{img}}}|frameless|alt={{{alt|Product image}}}|link={{#if:{{{link|}}}|{{{link}}}|{{{url|}}}}}]]
<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:{{{img|}}}|[[File:{{{img}}}|class=capsach-card__img|frameless|alt={{{alt|{{{title}}}}}}|link=]] | <div class="capsach-card__placeholder" role="img" aria-label="{{{alt|{{{title}}}Product image}}}"></div>}}
{{#if:{{{link|}}}{{{url|}}}|</a>|}}
}}
</div>▼
</div>
<div class="capsach-card__cta">{{CS button▼
▲ </div>
| url={{{url|}}}▼
▲ <div class="capsach-card__cta">{{CS button
| link={{{link|}}}
| texturl={{{buttonurl|Check out on Etsy}}}
▲ | urllink={{{urllink|}}}
| mobile=full▼
| text={{{button|Check out on Etsy}}}
| width=100%▼
▲ | mobile=full
| align=left▼
▲ | width=100%
}}</div>▼
▲ | align=left
▲ }}</div>
</div>
<noinclude>
{{Documentation}}
;Template: CS/products/card
A reusable promoPromo card for external products (e.g., Etsy). Renders:with **TitleImage → ImageCTA (withbutton**. bottom overlay forTitle, badge +and price) →have CTAbeen button**removed.
 
== 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.
Line 33:
| <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>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 (passed to {{tl|CS button}}).
|-
| <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>titleProduct image</code> || Alt text for the imageaccessibility.
|}
 
== Behavior ==
* Media areaImage links toare <code>link</code>created (preferred)via orthe file syntax’s <code>urllink=</code>. Ifparameter; neitherno israw provided,HTML itanchors isare non-clickableused.
* Width:Card is 100% width on mobile; max-widthand up to 480px on larger screens.▼
* Missing <code>img</code>: shows a neutral placeholder with the same overlay zone.
* Media area enforces a **2:3 (w:h) aspect ratio**; the image fills and crops as needed.
* Overlong <code>title</code>, <code>badge</code>, or <code>price</code> truncate with ellipsis; full text available via the <code>title</code> attribute.
* 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).
▲* 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
}}
Line 66 ⟶ 58:
 
== Troubleshooting ==
* **Image notAnchors showing as text**: passdo thenot filenameuse withoutraw <code>File:&lt;a&gt;</code> (ein wikitext.g., This template uses image <code>MyImage.pnglink=</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 link**: supply either <code>link</code> (internal) or <code>url</code> (external).
* **No image available**: omit <code>img</code> to get the neutral placeholder (still sized 2:3).
* **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>
Retrieved from "https://www.insurerbrain.com/wiki/Template:CS/products/card"