更多 招聘专区 布局（2）
查看全部
https://neobrutalism.com/zh/blocks/career-sections/department-openings-and-perks
部门职位与福利
招聘专区 · Pro 源码
面向职位数量不多、但很想讲清楚团队氛围的团队设计的招聘板块。带实时计数的部门标签筛选一份满宽行列表，让每个职位都保持相同的视觉分量，而不是在网格里互相竞争；下方的福利网格回答了列表必然引出的那个问题。无论哪个标签处于激活状态，职位始终留在标记结构中，这也是本组件不使用可折叠部门面板的原因。
招聘专区
部门职位与福利打开实时预览
- Hero、定价与登录
- 预览每个断点
- 复制源代码
- MCP 已准备好安装
- Radix · Base UI · React Aria
- 158 现成砌块
- 已发布的页面部分
- 仪表盘与营销
- Pro 解锁密码
- 即用型布局
喜爱。 开发者、设计师，
创作者都
偶然刷到你的 UI 套件就立马入手。这么新还在活跃维护、不断改进，干得漂亮 🤘
Ziv Reich, 软件开发者 只想说 neobrutalism.com 做得太棒了，真的很喜欢。我不擅长设计，所以它帮了大忙，我拿它做了自己的个人网站。
Paul Bratslavsky, Coding With Paul 主理人 终于用 Neobrutalism.com 重做了个人网站——好玩的库，上手也简单！
Cameron Blackwood, 内容创作者 Neobrutalism.com 是我最爱的复古风 UI 组件库之一——组件真能拿去上线。
Zhengyang Hou, 独立开发者 Web 上我最喜欢的 UI 库之一。做得很棒，希望它越走越远。
Taseen Tanvir, 创始人 & 设计师 刚试了 Neobrutalism.com Pro，不跟风的 UI 套件真是耳目一新。新粗野主义区块 🔥 让怪又好玩的原型快多了。
Nitesh Padghan, 捉刀写手 落地页设计出色，节奏与平衡都恰到好处。配色与动效结合，带来非常出色的用户体验。
Alan Obeng-Peprah, 高级设计师 @ NativeXAI 他们对设计的交付让我非常满意。最终成品与我设想的完全一致。
Desmond, 联合创始人 @ VectorlabsVentures 作为代理公司负责人，我通常要花几周打磨客户的落地页布局。用 Neobrutalism.com 后，套上模板、改好文案就能上线。
Duke Opoku Amankwah, 创始人 @ Midas 这些模板不仅视觉出色，结构也极其清晰。为我们节省了数周开发时间。
Abiola Braimah, 开发者 @ Studio IX 品质出众，细节到位。响应式设计在所有设备上都运行得很稳。
Acromond X., 联合创始人 @ VectorlabsVentures 把这些模板接入工作流后，我们的开发周期明显缩短。做得很好。
Raquib S., 后端开发者 这些模板已成为我们的首选资源。代码干净、文档齐全，也很容易定制。
Hallic M., 开发者 @ AtlasLabs Neobrutalism.com 模板在美学与功能之间取得了完美平衡，对我们的项目是真正的改变。
Ibrahim S., 前端负责人 @ ScaleUp 支持出色，模板质量也是 premium 级别。这些模板的投资回报非常惊人。
Kevin K., CEO @ WebCraft Neobrutalism.com 模板彻底改变了我们接手新客户项目的方式。代码质量极高，设计也真正达到一流水准。
Danny G., DevStack 创始人 我用过很多模板库，但 Neobrutalism.com 在性能优化与干净代码架构上的投入格外突出。
Ian D., Wavelength CTO 这些模板里的动画与微交互非常惊艳。对我们设计团队来说是最好的投资。
Ben S., PixelPerfect 首席设计师 作为非技术创始人，Neobrutalism.com 模板帮我们在不牺牲设计质量的情况下以创纪录速度上线 MVP。投资人非常惊喜。
Matthew I., 创业公司创始人 我很欣赏这些组件的模块化与文档质量。我们能无缝混用不同模板的片段。
Garrett P., TechFusion 前端负责人 Neobrutalism.com 模板的投资回报惊人。我们大幅缩短开发时间，同时交付更高质量的站点给客户。
Xavier C., 代理公司负责人
常见
问题
部门职位与福利 区块如何组成、可以更改的内容，以及何时使用它而不是此处的其他布局。
它是三者中最安静的一个。Filterable Job Openings Grid 是一个真正的招聘板——文字搜索、两个下拉筛选、每张卡片都印着薪资、三栏网格——这套机制在职位数达到约十来个后才值得。这个板块给每个职位一整行、同等分量，用一排部门标签做筛选，把剩下的篇幅留给福利和一位具名招聘联系人，适合五到十个空缺职位。Job Description With Sidebar 则是这里某一行链接到的详情页。
因为折叠起来的手风琴面板不会渲染任何子内容。如果用 Radix 或 Base UI 的 accordion 项把职位分组，每个关闭的部门在 HTML 里就是零条职位标题——对搜索引擎和页内查找都不可见，而这恰恰是这个板块存在的意义所在。标签让匹配的行始终留在文档中，只需一个 useState 就能实现。如果你确实想要可折叠分组，也要让面板始终挂载，而不是让底层组件把它们卸载。
你不需要动标签本身。这一排标签是在模块作用域用 new Set 从职位数组生成的，每个计数都是对同一数组做的一次筛选，所以新增一个带新部门字段的职位，会自动扩展这排标签并更新所有数字。激活标签除了填充样式，还带有 aria-pressed，因为仅靠颜色变化，屏幕阅读器无法知道哪个筛选项被选中。
每项福利都带一个 accent 字段，在一张普通卡片顶部绘出一条条纹，四项循环使用图表 token，因此会跟随你的调色板变化。不要把这个颜色搬到整张卡片上：图表 token 在浅色和深色模式下并不是同一种颜色，填色卡片在一个主题下清晰可读，在另一个主题下几乎看不见。条纹本身设为 aria-hidden，因为它自身不承载任何含义。
这条横幅是 bg-foreground 配 text-background，这个继承的颜色会渗透进它内部嵌套的一切——包括承载招聘人员信息的白色卡片，其文字颜色本会与自身表面颜色相同。任何放进反色横幅里的卡片，都必须显式恢复 text-foreground。这是反色区块在有人往里丢新内容时最常见的一种失效方式。
在 sm 以下这一行是 flex 列，往上是两端对齐的行，所以在 320px 屏幕上，标题、元信息行和箭头会依次堆叠，而不是挤在一起。标题所在列是 min-w-0，长标题会换行而不是把箭头挤出行外，元信息标签则用 gap-x-4 gap-y-1 独立换行。这些行位于一张 overflow-hidden 的卡片内，所以焦点环使用负的 outline offset——正值会被卡片边缘裁掉。