Template:UI/card: Difference between revisions
Template page
More actions
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..." |
No edit summary |
||
| Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
Renders a | Renders a content card with optional icon, heading link, and description. | ||
description. Designed for landing-page card grids that point visitors at | Designed for landing-page card grids that point visitors at major content areas. | ||
major content areas | |||
All styling lives in [[MediaWiki:Common.css]] under the <code>.wiki-card</code> | |||
class (and its <code>.card-icon</code> / <code>.card-title</code> / | |||
<code>.card-desc</code> children) — change there to update every card across | |||
the wiki. This template is just structure. | |||
Wrap multiple calls in a container with the <code>.wiki-card-grid</code> | |||
class (provided in Common.css) to render an auto-flowing card grid. | |||
Parameters: | Parameters: | ||
* <code>target</code> — internal wikilink target ( | * <code>target</code> — internal wikilink target (required) | ||
* <code>label</code> — heading text ( | * <code>label</code> — heading text (defaults to <code>target</code> if omitted) | ||
* <code>description</code> — short body text below the heading (one sentence) | * <code>description</code> — short body text below the heading (one sentence) | ||
</noinclude><includeonly><div | * <code>icon</code> — optional icon: a Unicode glyph, HTML entity, or short text | ||
< | </noinclude><includeonly><div class="wiki-card">{{#if: {{{icon|}}}|<span class="card-icon">{{{icon}}}</span>}}<span class="card-title">[[{{{target|}}}|{{{label|{{{target|}}}}}}]]</span>{{#if: {{{description|}}}|<div class="card-desc">{{{description}}}</div>}}</div></includeonly> | ||
<div | |||
</div></includeonly> | |||
Latest revision as of 08:22, 27 April 2026
Renders a content card with optional icon, heading link, and description. Designed for landing-page card grids that point visitors at major content areas.
All styling lives in MediaWiki:Common.css under the .wiki-card
class (and its .card-icon / .card-title /
.card-desc children) — change there to update every card across
the wiki. This template is just structure.
Wrap multiple calls in a container with the .wiki-card-grid
class (provided in Common.css) to render an auto-flowing card grid.
Parameters:
target— internal wikilink target (required)label— heading text (defaults totargetif omitted)description— short body text below the heading (one sentence)icon— optional icon: a Unicode glyph, HTML entity, or short text