ui component composite type / Card Group
Card Group
以一致布局组织多个卡片并表达集合关系的结构
Identity
- Subtype
- 复合组件
- Parent Taxonomy
- Content & Data Display
What
- Definition
- 以一致布局组织多个卡片并表达集合关系的结构
- Composition & States
- 触发或标题、主体内容、辅助信息、主要操作、状态反馈、关闭或返回入口(按场景取舍)
Why
- Role
- 以一致布局组织多个卡片并表达集合关系的结构
Where
- Applicable Context
- Web Interface Design
How
- Checklist
- 定义用途;明确结构与状态;覆盖键盘/触摸/读屏;处理加载、错误和空状态;验证响应式与焦点顺序。
Lifecycle
- Status
- 启用
Relations
- Related Content
- Product Comparison Section
Related content
Relationships come from the local knowledge graph and include reverse links.
- Product Comparison SectionProduct ComparisonRelated
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- App DownloadApp DownloadReverse · Related
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Awards & CertificationsAwards & CertificationsReverse · Related
展示奖项、认证、评测或资质信息,并提供来源和有效期上下文。
- Benefits GridBenefits GridReverse · Related
用短标题、解释和视觉线索把功能转译成用户收益。
- Changelog / Release NotesChangelog / Release NotesReverse · Related
按版本和日期说明产品变化、影响、迁移和后续行动。
- Community / Activity FeedCommunity / Activity FeedReverse · Related
连续呈现社区成员、产品活动或协作事件,支持参与、筛选和回到对象。
- Comparison TableComparison TableReverse · Related
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Content ListContent ListReverse · Related
以列表、卡片或网格连续呈现一组可浏览、筛选或继续阅读的内容。
- Customer Logo CloudCustomer Logo CloudReverse · Related
以客户、合作方或使用组织的标志形成快速可扫读的信任线索。
- Directory / Listing GridDirectory / Listing GridReverse · Related
将组织、资源、产品、人员或地点按筛选和排序组织成目录。
- Feature & ValueFeature & ValueReverse · Related
把产品能力、用户收益和证据组织成可扫描的价值说明。
- How It WorksHow It WorksReverse · Related
用少量步骤说明产品、服务或工具从输入到结果的工作方式。
- Integration / Partner LogosIntegration / Partner LogosReverse · Related
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Job ListingJob ListingReverse · Related
让候选人搜索、筛选、比较职位并进入申请流程。
- Loyalty / RewardsLoyalty / RewardsReverse · Related
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Maintenance / Status PageMaintenance / Status PageReverse · Related
说明服务状态、维护时间、影响范围、进展和恢复后的验证方式。
- Partner DirectoryPartner DirectoryReverse · Related
按地区、能力、行业或集成方式浏览合作伙伴和服务提供方。
- Press MentionsPress MentionsReverse · Related
展示媒体报道、行业引用或第三方提及,补充外部可信度。
- Pricing ComparisonPricing ComparisonReverse · Related
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Process StepsProcess StepsReverse · Related
将复杂任务拆解为有顺序、有状态和有完成标准的步骤。
- Product / Plan CardsProduct / Plan CardsReverse · Related
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Product ConfiguratorProduct ConfiguratorReverse · Related
按选项、约束和价格反馈组合或定制一个产品、方案或服务。
- Referral / InviteReferral / InviteReverse · Related
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Related ContentRelated ContentReverse · Related
在当前内容之后提供语义相关、下一步阅读或相邻任务的入口。
- Screenshot GalleryScreenshot GalleryReverse · Related
通过连续截图、放大预览和说明展示界面、功能或视觉成果。
- Security & ComplianceSecurity & ComplianceReverse · Related
解释安全、隐私、合规、数据处理和认证信息,支持高风险决策。
- Social EmbedSocial EmbedReverse · Related
嵌入来自社交平台的帖子、视频或讨论,同时控制隐私、性能和失败退化。
- Social Media FeedSocial Media FeedReverse · Related
把社交平台上的内容、作者、时间和外链以受控方式嵌入页面。
- Social ProofSocial ProofReverse · Related
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Store LocatorStore LocatorReverse · Related
让用户按位置、服务或库存查找最近的门店、机构或服务点。
- Team GridTeam GridReverse · Related
以成员卡片展示团队角色、专长、身份和联系/了解更多入口。
- Timeline / MilestonesTimeline / MilestonesReverse · Related
按时间或阶段表达项目、组织、产品或用户旅程的关键节点。
- Trust BadgesTrust BadgesReverse · Related
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- UGC GalleryUGC GalleryReverse · Related
以用户生成图片、视频或帖子形成参与感、真实感和社区证明。
- Usage MetricsUsage MetricsReverse · Related
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Webinar / Event ScheduleWebinar / Event ScheduleReverse · Related
呈现活动、直播或会议的时间、议程、嘉宾和参与入口。
- Web Interface DesignWeb 界面设计Related
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Content & Data Display内容与数据展示Related
用于呈现文本、媒体、对象、列表、表格、指标和关系数据的组件。