跳到内容

斜切封面个人卡片

个人资料 · Pro 源码

一张紧凑的个人资料卡片,封面图不是直切,而是以斜角切开,让下方的照片看起来像是从切口中顶了上来。方形头像叠在切口上,姓名和身份居中排列在下方,帖子数、关注者数和点赞数排在底部,上方是一条带下划线的链接。这条对角线通过两层叠放的wrapper用clip-path实现,正是它让切口处呈现出硬边黑线,而不是原始图片边界。

打开实时预览获取 Neobrutalism Pro
个人资料
Neobrutalist profile card for React and Tailwind CSS with a diagonally cut cover: abstract orange, blue and black artwork with a ringed planet and a starburst above an angled edge, a square portrait overlapping the cut, a centred name and role, posts, followers and likes counts, and a View Profile link underlined in yellow.
斜切封面个人卡片
  • Hero、定价与登录
  • 预览每个断点
  • 复制源代码
  • MCP 已准备好安装
  • Radix · Base UI · React Aria
  • 158 现成砌块
  • 已发布的页面部分
  • 仪表盘与营销
  • Pro 解锁密码
  • 即用型布局
预览免费全屏打开并切换断点或主题。代码Pro一个独立的 TSX 文件。复制它，拥有它。安装Pro一条 shadcn CLI 命令，或用于 Claude Code、Cursor 等 MCP 客户端的代理提示。

构建工具

加上 lucide-react 图标和 Tailwind CSS — 无其他运行时依赖。

更多 个人资料 布局（8）

查看全部

https://neobrutalism.com/zh/blocks/profile/diagonal-cover-profile-card

喜爱。 开发者、设计师，
创作者都

  • 偶然刷到你的 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., 代理公司负责人

常见
问题

斜切封面个人卡片 区块如何组成、可以更改的内容，以及何时使用它而不是此处的其他布局。

访问受限问题？请发送电子邮件[email protected]
Get Pro — Save 33%--:--:--