功能全景展示Feature-Rich Showcase
用卡片矩阵把功能、收益与截图铺开，靠图标色与留白分组。信息完整但容易冗长，需严格控制每组卡片数量与文案长度。
典型场景B2B SaaS 官网 · 功能对比页（已弃用）
编号22
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
用卡片矩阵把功能、收益与截图铺开，靠图标色与留白分组。信息完整但容易冗长，需严格控制每组卡片数量与文案长度。
关键词
Multiple feature sectionsgrid layoutbenefit cardsvisual feature demonstrationsinteractive elementsproblem-solution pairs
别名
Feature-Rich
效果与动效
Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions
设计系统变量
--card-padding2rem--card-radius12px--icon-size48px--grid-gap2rem--section-padding4rem 0--hover-transformtranslateY(-4px)配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs
辅色 / Secondary
Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)
强调色在页面底色上的对比度约 6.0:1，可用于正文与图标。
适用场景
适合 / Best For
- Enterprise SaaS
- software tools landing pages
- platform services
- complex product explanations
- B2B products
避开 / Do Not Use For
- Simple product pages
- early-stage startups with few features
- entertainment landing pages
框架兼容
tailwindbootstrap
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Feature grid responsive,
- Icons consistent style,
- Card hover effects smooth,
- Alternating sections contrast,
- Benefits clearly stated,
- Mobile stacks properly
CSS / 技术关键词
display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 2rem, card hover effects (translateY -4px), icon containers, alternating background colors
该条目在上游数据中标记为已弃用，插件检索默认排除；查询中包含
legacy 或 deprecated 时才会召回。AI 提示词
Design a feature showcase landing page. Use: grid layout for features (3-4 columns), feature cards with icons, benefit-focused copy, alternating sections, comparison tables, interactive demos, problem-solution pairs.