ui component composite type / Card
Card
将相关信息和操作组合成可扫描、可比较的内容容器。
Identity
- Subtype
- 复合组件
- Parent Taxonomy
- Content & Data Display
What
- Definition
- 将相关信息和操作组合成可扫描、可比较的内容容器。
Why
- Role
- 承载文章、功能、产品、资源和结果等内容对象。
Where
- Applicable Context
- Web Interface Design, Skeleton, Primary, Secondary, Filled, Large
How
- Checklist
- 标题是否唯一;摘要是否必要;链接区域是否清楚;响应式下内容是否溢出;键盘是否能到达操作。
Lifecycle
- Status
- 启用
Related content
Relationships come from the local knowledge graph and include reverse links.
- Accessibility StatementAccessibility StatementReverse · Related
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- AI Prompt / ResponseAI Prompt / ResponseReverse · Related
让用户提交自然语言任务并理解生成结果、来源、限制和继续操作。
- API / Code ExampleAPI / Code ExampleReverse · Related
用请求、参数、代码和结果说明 API 或技术能力如何被正确使用。
- App DownloadApp DownloadReverse · Related
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Article BodyArticle BodyReverse · Related
承载文章或长内容的标题层级、正文、媒体、引用、代码和结构化信息。
- Author BioAuthor BioReverse · Related
说明作者身份、专业背景、联系方式和相关文章,建立内容责任主体。
- Before / After ShowcaseBefore / After ShowcaseReverse · Related
对比变化前后的视觉或结果,帮助用户理解产品、服务或过程价值。
- Benefits GridBenefits GridReverse · Related
用短标题、解释和视觉线索把功能转译成用户收益。
- Comments / DiscussionComments / DiscussionReverse · Related
允许用户在内容对象下阅读、发表和回复讨论,并处理审核和空状态。
- CTA BandCTA BandReverse · Related
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Data Freshness / Last UpdatedData Freshness / Last UpdatedReverse · Related
表达数据更新时间、来源、有效期和刷新动作,避免用户误读过期内容。
- FAQFAQReverse · Related
回答高频疑问,减少决策、使用或转化过程中的不确定性。
- Feature & ValueFeature & ValueReverse · Related
把产品能力、用户收益和证据组织成可扫描的价值说明。
- HeroHeroReverse · Related
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- How It WorksHow It WorksReverse · Related
用少量步骤说明产品、服务或工具从输入到结果的工作方式。
- Integration / Partner LogosIntegration / Partner LogosReverse · Related
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Location / MapLocation / MapReverse · Related
提供地点、路线、营业时间和区域上下文,支持地图之外的可访问文本路径。
- Loyalty / RewardsLoyalty / RewardsReverse · Related
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Process StepsProcess StepsReverse · Related
将复杂任务拆解为有顺序、有状态和有完成标准的步骤。
- Resource / DownloadResource / DownloadReverse · Related
提供可下载、可保存或可继续阅读的资源,并说明格式、价值和限制。
- Share / InviteShare / InviteReverse · Related
让用户把页面、结果、资源或邀请以适合目标渠道的方式分享出去。
- Team GridTeam GridReverse · Related
以成员卡片展示团队角色、专长、身份和联系/了解更多入口。
- Webinar / Event ScheduleWebinar / Event ScheduleReverse · Related
呈现活动、直播或会议的时间、议程、嘉宾和参与入口。
- Web Interface DesignWeb 界面设计Related
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Content & Data Display内容与数据展示Related
用于呈现文本、媒体、对象、列表、表格、指标和关系数据的组件。
- Card ActionCard ActionReverse · Related
卡片级主要操作或可点击入口
- Card BodyCard BodyReverse · Related
承载卡片主体摘要或内容的区域
- Card FooterCard FooterReverse · Related
承载次要信息和操作的底部区域
- Card HeaderCard HeaderReverse · Related
呈现卡片标题、状态和辅助信息的头部
- Card MediaCard MediaReverse · Related
承载图片、视频或图表的媒体区域
- MetadataMetadataReverse · Related
呈现时间、作者、标签等辅助元信息
- FilledFilledRelated
以实色表面表达层级和可操作性的变体。
- LargeLargeRelated
适合主要任务、触屏和强调场景的大尺寸变体。
- PrimaryPrimaryRelated
承担上下文中最重要任务的主要视觉变体。
- SecondarySecondaryRelated
承担次要但仍重要任务的视觉变体。
- SkeletonSkeletonRelated
内容结构已知但数据尚未到达的占位状态。