外链卡片 LinkCard

概览

LinkCardList 用于展示一系列外部或内部链接入口，每个卡片都支持媒体预览、标题和描述。

实时预览

探索更多资源

开发者文档

深入了解 API 和集成细节。

社区论坛

与其他开发者讨论并分享经验。

使用方法

import { LinkCardList } from '@goenhance/cms-ui';

const Example = () => (
  <LinkCardList
    title="推荐链接"
    list={[
      { name: "链接 A", url: "...", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	列表大标题
list	LinkCardItem[]	[]	卡片项列表

LinkCardItem

属性	类型	说明
name	string	卡片标题
description	string	简短描述文案
url	string	跳转链接
mediaUrl	string	顶部图片或视频 URL
poster	string	视频封面

特性

• 悬停反馈：鼠标移入时卡片轻微上浮并伴随阴影增强，标题颜色转为品牌色。
• 媒体支持：支持图片预览或自动播放的短视频预览。
• 多端优化：支持在移动端到超宽屏之间的 5 级动态栅格布局。

---

主题覆盖

可覆盖变量

类名：mewx-cms-link-card-list

变量名	用途	默认值
--mewx-cms-link-card-list-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-link-card-list-card-bg	卡片背景	var(--blocks-bg-card)
--mewx-cms-link-card-list-card-border	卡片边框	var(--blocks-border)
--mewx-cms-link-card-list-card-radius	卡片圆角	var(--blocks-radius-lg)
--mewx-cms-link-card-list-card-shadow	卡片阴影	var(--blocks-shadow-sm)
--mewx-cms-link-card-list-card-hover-shadow	卡片悬停阴影	var(--blocks-shadow-card-hover)
--mewx-cms-link-card-list-title-text	卡片标题色	var(--blocks-text-heading)
--mewx-cms-link-card-list-title-hover-text	卡片标题悬停色	var(--blocks-primary)
--mewx-cms-link-card-list-desc-text	卡片描述色	var(--blocks-text-muted)

覆盖示例

/* 蓝色链接卡片 */
.blue-link-cards {
  --mewx-cms-link-card-list-title-hover-text: 59 130 246;
  --mewx-cms-link-card-list-card-hover-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
}

<LinkCardList className="blue-link-cards" title="推荐链接" list={[...]} />