ui component composite type / Media Card
Media Card
结合图片、视频或音频预览、元信息和动作的内容卡片。
Key fields
Identity
- Subtype
- 复合组件
- Parent Taxonomy
- Media & Identity
What
- Definition
- 结合图片、视频或音频预览、元信息和动作的内容卡片。
- Composition & States
- 容器 + 子组件/部件 + 状态协调 + 操作反馈 + 错误/空状态（按需）
Why
- Role
- 组织子组件、管理局部状态和交互顺序，并保持组合后的语义与可访问性。
Where
- Applicable Context
- Content & Interface Language, Default, Focused, Disabled, Loading
How
- Checklist
- 是否有清晰的阅读顺序、焦点顺序和退化方案；子组件状态是否一致；长内容、错误、加载和空状态是否可用。
Lifecycle
- Status
- 启用
Relations
- Related Content
- Content & Interface Language
Related content
Relationships come from the local knowledge graph and include reverse links.
- Before / After ShowcaseBefore / After ShowcaseReverse · Related
对比变化前后的视觉或结果，帮助用户理解产品、服务或过程价值。
- Case Study TeaserCase Study TeaserReverse · Related
用案例摘要连接具体客户、问题、过程和结果，支持进一步阅读。
- Location / MapLocation / MapReverse · Related
提供地点、路线、营业时间和区域上下文，支持地图之外的可访问文本路径。
- Media / Product DemoMedia / Product DemoReverse · Related
用视频、动图或交互预览解释产品如何工作及其关键体验。
- Screenshot GalleryScreenshot GalleryReverse · Related
通过连续截图、放大预览和说明展示界面、功能或视觉成果。
- Social EmbedSocial EmbedReverse · Related
嵌入来自社交平台的帖子、视频或讨论，同时控制隐私、性能和失败退化。
- Social Media FeedSocial Media FeedReverse · Related
把社交平台上的内容、作者、时间和外链以受控方式嵌入页面。
- UGC GalleryUGC GalleryReverse · Related
以用户生成图片、视频或帖子形成参与感、真实感和社区证明。
- Video DemoVideo DemoReverse · Related
用短视频展示产品、服务或操作流程，并提供字幕、摘要和替代路径。
- Content & Interface Language内容与界面语言Related
用标签、提示、说明和错误文案帮助用户理解界面和采取行动。
- Media & Identity媒体与身份Related
用于表达人物、对象、图片、视频、文件和品牌身份的组件。
- Card ActionCard ActionReverse · Related
卡片级主要操作或可点击入口
- Card BodyCard BodyReverse · Related
承载卡片主体摘要或内容的区域
- Card MediaCard MediaReverse · Related
承载图片、视频或图表的媒体区域
- DefaultDefaultRelated
默认状态，组件可被使用但没有额外交互反馈。
- DisabledDisabledRelated
组件暂时不可操作的状态。
- FocusedFocusedRelated
键盘或其他输入方式当前定位到组件的状态。
- LoadingLoadingRelated
组件正在等待异步结果的状态。