UI Components
章节标题
带有超大数字、引导标签和分隔线的粗体章节标题。
作者:mcpskills
框架
reacttailwind
UI 库
content
难度beginner
英文提示词
Create a premium chapter header component for long-form content. Use a clean off-white or very light gray background. The header includes a small uppercase kicker label (e.g., 'CHAPTER 03') in tracking-widest sans-serif and a muted accent color. Below it, a huge, light gray, outlined or solid chapter number '03' sits behind or beside the chapter title. The title itself is a large bold serif or sans-serif headline. A thin horizontal rule or decorative line sits below the title. Add a short subtitle or summary paragraph in a muted color. Use no emojis. The feel should be editorial, structured, and elegant.
中文提示词
为长篇内容创建一个高级章节标题组件。使用干净的米白色或极浅灰色背景。标题包含一个小的大写引导标签(如 'CHAPTER 03'),使用 tracking-widest 无衬线字体和 muted 强调色。其下方或旁边放置一个巨大的浅灰色章节数字 '03'(描边或实心),位于章节标题后方或旁边。标题本身是大号粗体衬线或无衬线标题。标题下方是一条细横线或装饰线。添加一个 muted 颜色的短副标题或摘要段落。不使用 emoji。整体应呈现编辑式、结构化且优雅的感觉。

Bold chapter heading with oversized number, kicker, and separator rule.