https://miniscope.org/index.php?action=history&feed=atom&title=Template%3AUI%2Fcard
Template:UI/card - Revision history
2026-04-27T15:53:15Z
Revision history for this page on the wiki
MediaWiki 1.44.5
https://miniscope.org/index.php?title=Template:UI/card&diff=692&oldid=prev
Daharoni at 15:22, 27 April 2026
2026-04-27T15:22:52Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:22, 27 April 2026</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Renders a <del style="font-weight: bold; text-decoration: none;">visual </del>content card with <del style="font-weight: bold; text-decoration: none;">a </del>heading link and <del style="font-weight: bold; text-decoration: none;">a one-line</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Renders a content card with <ins style="font-weight: bold; text-decoration: none;">optional icon, </ins>heading link<ins style="font-weight: bold; text-decoration: none;">, </ins>and description.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>description. Designed for landing-page card grids that point visitors at</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Designed for landing-page card grids that point visitors at major content areas.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>major content areas <del style="font-weight: bold; text-decoration: none;">(e.g. on the Main page or on top-level dashboards)</del>.</div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Cards are layout primitives </del>— <del style="font-weight: bold; text-decoration: none;">wrap a flex or grid container around several</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">All styling lives in [[MediaWiki:Common.css]] under the <code>.wiki-card</code></ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">calls </del>to <del style="font-weight: bold; text-decoration: none;">render a </del>card <del style="font-weight: bold; text-decoration: none;">grid</del>. <del style="font-weight: bold; text-decoration: none;">See [[Main Page]] for an example</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">class (and its <code>.card-icon</code> / <code>.card-title</code> /</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><code>.card-desc</code> children) </ins>— <ins style="font-weight: bold; text-decoration: none;">change there </ins>to <ins style="font-weight: bold; text-decoration: none;">update every </ins>card <ins style="font-weight: bold; text-decoration: none;">across</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">the wiki</ins>. <ins style="font-weight: bold; text-decoration: none;">This template is just structure</ins>.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Styling uses Citizen</del>-<del style="font-weight: bold; text-decoration: none;">skin CSS custom properties with hex fallbacks so cards</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Wrap multiple calls in a container with the <code>.wiki</ins>-<ins style="font-weight: bold; text-decoration: none;">card-grid</code></ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">adapt </del>to <del style="font-weight: bold; text-decoration: none;">light/dark mode and degrade gracefully on other skins</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">class (provided in Common.css) </ins>to <ins style="font-weight: bold; text-decoration: none;">render an auto-flowing card grid</ins>.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Parameters:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Parameters:</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* <code>target</code> — internal wikilink target (<del style="font-weight: bold; text-decoration: none;">page name to link to</del>)</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <code>target</code> — internal wikilink target (<ins style="font-weight: bold; text-decoration: none;">required</ins>)</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* <code>label</code> — heading text (<del style="font-weight: bold; text-decoration: none;">the clickable link</del>)</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <code>label</code> — heading text (<ins style="font-weight: bold; text-decoration: none;">defaults to <code>target</code> if omitted</ins>)</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* <code>description</code> — short body text below the heading (one sentence)</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* <code>description</code> — short body text below the heading (one sentence)</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></noinclude><includeonly><div <del style="font-weight: bold; text-decoration: none;">style</del>="<del style="font-weight: bold; text-decoration: none;">padding:16px;border:1px solid var(</del>-<del style="font-weight: bold; text-decoration: none;">-border-color-base, </del>#<del style="font-weight: bold; text-decoration: none;">d1d9e0);border-radius</del>:<del style="font-weight: bold; text-decoration: none;">8px;background:var(--background-color-neutral</del>-<del style="font-weight: bold; text-decoration: none;">subtle, #f8f9fa);</del>"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* <code>icon</code> — optional icon: a Unicode glyph, HTML entity, or short text</ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><<del style="font-weight: bold; text-decoration: none;">div style</del>="<del style="font-weight: bold; text-decoration: none;">font-size:1.15em;font-weight:600;margin</del>-<del style="font-weight: bold; text-decoration: none;">bottom:6px;</del>">[[{{{target|}}}|{{{label|}}}]]</<del style="font-weight: bold; text-decoration: none;">div</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div></noinclude><includeonly><div <ins style="font-weight: bold; text-decoration: none;">class</ins>="<ins style="font-weight: bold; text-decoration: none;">wiki</ins>-<ins style="font-weight: bold; text-decoration: none;">card">{{</ins>#<ins style="font-weight: bold; text-decoration: none;">if</ins>: <ins style="font-weight: bold; text-decoration: none;">{{{icon|}}}|<span class="card</ins>-<ins style="font-weight: bold; text-decoration: none;">icon</ins>"><ins style="font-weight: bold; text-decoration: none;">{{{icon}}}</span>}}</ins><<ins style="font-weight: bold; text-decoration: none;">span class</ins>="<ins style="font-weight: bold; text-decoration: none;">card</ins>-<ins style="font-weight: bold; text-decoration: none;">title</ins>">[[{{{target|}}}|{{{label<ins style="font-weight: bold; text-decoration: none;">|{{{target</ins>|<ins style="font-weight: bold; text-decoration: none;">}}}</ins>}}}]]</<ins style="font-weight: bold; text-decoration: none;">span</ins>><ins style="font-weight: bold; text-decoration: none;">{{#if: {{{description|}}}|</ins><div <ins style="font-weight: bold; text-decoration: none;">class</ins>="<ins style="font-weight: bold; text-decoration: none;">card</ins>-<ins style="font-weight: bold; text-decoration: none;">desc</ins>">{{{description}}}</div><ins style="font-weight: bold; text-decoration: none;">}}</ins></div></includeonly></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><div <del style="font-weight: bold; text-decoration: none;">style</del>="<del style="font-weight: bold; text-decoration: none;">color:var(-</del>-<del style="font-weight: bold; text-decoration: none;">color-subtle, #54595d);</del>">{{{description<del style="font-weight: bold; text-decoration: none;">|</del>}}}</div></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div></div></includeonly></div></td><td colspan="2" class="diff-side-added"></td></tr>
</table>
Daharoni
https://miniscope.org/index.php?title=Template:UI/card&diff=589&oldid=prev
Daharoni: Created page with "<noinclude> Renders a visual content card with a heading link and a one-line description. Designed for landing-page card grids that point visitors at major content areas (e.g. on the Main page or on top-level dashboards). Cards are layout primitives — wrap a flex or grid container around several calls to render a card grid. See Main Page for an example. Styling uses Citizen-skin CSS custom properties with hex fallbacks so cards adapt to light/dark mode and degrad..."
2026-04-27T02:47:21Z
<p>Created page with "<noinclude> Renders a visual content card with a heading link and a one-line description. Designed for landing-page card grids that point visitors at major content areas (e.g. on the Main page or on top-level dashboards). Cards are layout primitives — wrap a flex or grid container around several calls to render a card grid. See <a href="/wiki/Main_Page" title="Main Page">Main Page</a> for an example. Styling uses Citizen-skin CSS custom properties with hex fallbacks so cards adapt to light/dark mode and degrad..."</p>
<p><b>New page</b></p><div><noinclude><br />
Renders a visual content card with a heading link and a one-line<br />
description. Designed for landing-page card grids that point visitors at<br />
major content areas (e.g. on the Main page or on top-level dashboards).<br />
<br />
Cards are layout primitives — wrap a flex or grid container around several<br />
calls to render a card grid. See [[Main Page]] for an example.<br />
<br />
Styling uses Citizen-skin CSS custom properties with hex fallbacks so cards<br />
adapt to light/dark mode and degrade gracefully on other skins.<br />
<br />
Parameters:<br />
* <code>target</code> — internal wikilink target (page name to link to)<br />
* <code>label</code> — heading text (the clickable link)<br />
* <code>description</code> — short body text below the heading (one sentence)<br />
</noinclude><includeonly><div style="padding:16px;border:1px solid var(--border-color-base, #d1d9e0);border-radius:8px;background:var(--background-color-neutral-subtle, #f8f9fa);"><br />
<div style="font-size:1.15em;font-weight:600;margin-bottom:6px;">[[{{{target|}}}|{{{label|}}}]]</div><br />
<div style="color:var(--color-subtle, #54595d);">{{{description|}}}</div><br />
</div></includeonly></div>
Daharoni