Example:色卡标签

一个支持图片/纯色背景、悬停放大与整块点击跳转的色卡标签组件。

最简调用

只传名称，其余使用默认值：

{{色卡标签
| 名称 = 东方通合
}}

效果：

[[|]]▣▣▣▣

东方通合

完整调用示例

{{色卡标签
| 链接         = 东方通合
| 背景色       = #57000d
| 水印         = UNITE EAST
| 水印字体     = cinzel
| 名称         = 东方通合
| 标题字体     = noto
| 英文标题     = UNITE EAST
| 英文标题字体 = rubik
| 装饰         = ▼▼▼
| 装饰字体     = rubik
}}

效果：

▣▣▣▣

UNITE EAST东方通合UNITE EAST▼▼▼

更换背景色

{{色卡标签
| 链接     = 万类天宥
| 背景色   = #0d2b3e
| 名称     = 万类天宥
| 英文标题 = MYRIAD
| 装饰     = ◆◆◆
}}

效果：

▣▣▣▣

万类天宥MYRIAD◆◆◆

使用背景图片

{{色卡标签
| 链接   = 万类天宥
| 图片   = 占位图1.png
| 水印   = MYRIAD
| 名称   = 万类天宥
| 英文标题 = MYRIAD
}}

效果：

▣▣▣▣

MYRIAD万类天宥MYRIAD

参数说明

参数	可选值	默认	说明
链接	任意页面名或完整 URL	位格	点击卡片跳转的目标
背景色	任意颜色值	#57000d	卡片底色，无图片时显示
图片	文件名，含扩展名	空	卡片背景图，传图时铺满卡片并盖住背景色
水印	任意文字	空	卡片左侧的大号浅色水印
水印字体	字体类后缀，如 rubik、noto、cinzel、tesla、ballet、college、chrontor、mono	rubik	水印字体
名称	任意文字	空	中文主标题
标题字体	字体类后缀	noto	中文主标题字体
英文标题	任意文字	空	英文副标题
英文标题字体	字体类后缀	rubik	英文副标题字体
装饰	任意文字	空	主标题下方的装饰符号
装饰字体	字体类后缀	rubik	装饰符号字体

注意事项

卡片悬停时整体放大至 1.08 倍，由 fx-hover-grow 类实现。
有图片时图片铺满卡片并盖住背景色；无图片时显示背景色。
点击卡片任意位置均触发跳转，交互由覆盖整张卡片的隐藏链接实现，不需要 JS。
「链接」传页面名时跳转至对应 wiki 页面，传完整 URL 时跳转至外部网站。
卡片内容层设置了 pointer-events:none，确保点击穿透至链接层。
组件样式定义在 Template:色卡标签/styles.css。
字体类来自 MediaWiki:Citizen.css，详见 Example:字体调用。