Detail Hero
详情页头图区
The opening block of a detail page: hero media, title, key facts, then the body — often with a sticky action bar.
All platformsContentContent areaComponent
大白话说明
详情页头图区在三秒内回答「这是什么、值不值得继续看」：媒体先给感性判断，标题给理性确认，元信息（作者/评分/价格）给信任，之后正文展开，转化动作吸底常驻。
什么时候用
商品详情、文章详情、课程详情、房源详情——一切「看清一个再决定」的页面开头。
什么时候不用
信息密度优先的工作页面（数据详情、工单详情）别用大头图占首屏，字段前置更重要。
细节与变体
- 头图区总高度别超过首屏 60%，要给正文露一截钩子
- 吸底操作条最多两个按钮：主行动 + 一个次行动（收藏/分享二选一）
- 标题字号是全页最大，但别超过 28px 在移动端喧宾夺主
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- Gestalt ↗ Apache-2.0 · 免费（Apache-2.0）
Pinterest's design system — the home of the Masonry layout and image-first patterns.
- AstroWind ↗ MIT · 免费（MIT）
An Astro + Tailwind landing page and blog template with all the standard sections.